Berbagi Informasi Bisnis, Berita, Tips & Trik, dll: Komentar

Tampilkan postingan dengan label Komentar. Tampilkan semua postingan

Cara Membuat Link Pada Komentar Blog

Cara Membuat Link Pada Komentar Blog - Blog KUCOPAS kembali lagi update posting setelah lama tidak pernah share artikel yang bermanfaat untuk sobat semua. Pada kesempatan kali ini saya akan memberikan tips dan trik seputar dunia blog, yakni tentang Cara Membuat Link Di Komentar Blog.

Membuat Link di komentar blog caranya sangat mudah sekali, namun bagi blogger yang masih newbie alias baru belajar seperti saya ini membuat link pada kotak komentar tidaklah mudah. Karena memang belum tahu caranya sama sekali atau sudah tahu tapi tidak mengerti cara menerapkannya secara baik, benar dan efisien.

Bagi para master blogger membuat link di kotak komentar sangatlah mudah untuk dilakukan, namun kadang lupa atau memang malas menulis secara manual dan lebih memilih untuk copy paste. Karena membuat Link di kolom komentar harus menggunakan kode tag HTML, dan kode tersebut sulit untuk dihafalkan meski kodenya sangat sedikit dan simpel.

Fungsi dan kegunaan membuat Link pada kolom komentar postingan blog milik orang lain salah satunya adalah untuk meningkatkan trafik pengunjung blog sobat, contohnya bila ada pengunjung yang klik link sobat pada komentar posting blog milik orang lain, maka klik tersebut akan menuju ke blog yang sobat arahkan pada link tersebut. Alhasil blog sobat trafiknya juga akan meningkat, apalagi komentar sobat baik, sopan dan bermanfaat bagi para pembaca komentar.

Keuntungan yang lain jika sobat membuat link di kotak komentar postingan blog orang lain adalah otomatis blog sobat akan mendapatkan Backlink dari blog tersebut. Karena link yang sobat pasang adalah link hidup yang bertautan dengan blog sobat.

Agar sobat tidak penasaran lagi tentang bagaimana cara membuat dan memasang atau menerapkan link pada kolom komentar blog, silahkan sobat lihat contoh Kode Tag HTML berikut di bawah ini.

Contoh No 1: Link Anchor Text Normal.
<a href="http://kuc0pas.blogspot.com">KUCOPAS</a>
Maka hasilnya akan terlihat seperti ini pada komentar blog: KUCOPAS

Contoh No 2: Link Anchor Text Tebal (Bold).
<b><a href="http://kuc0pas.blogspot.com">KUCOPAS</a></b>
Maka hasilnya akan terlihat seperti ini dalam komentar blog: KUCOPAS

Keterangan:

Warna Merah silahkan ganti dengan alamat URL blog sobat.
Warna Hijau silahkan sobat ganti dengan Teks yang ingin sobat munculkan dalam komentar blog.
Warna Biru adalah Tampilan Hasil Link dan Teks yang muncul dalam komentar blog.

Catatan:
Bagi sobat yang akan membuat link pada kolom komentar postingan blog orang lain dengan tujuan ingin memperbanyak Backlink, saya sarankan jangan terlalu banyak menaruh link dalam komentar blog orang lain, hal ini bisa di anggap SPAM oleh pemilik blog. Alhasil komentar sobat tidak akan diterbitkan atau di setujui bahkan bisa di hapus secara permanen, jadi sia-sia saja sobat membuat link pada komentar blog orang lain.

Jika dalam kolom komentar suatu blog sudah ada peringatan jangan memberikan komentar yang mengandung link aktif seperti blog KUCOPAS ini, maka jangan sekali-kali sobat membuat komentar yang mengandung link. Karena komentar sobat juga akan sia-sia, sebab komentar sobat akan otomatis masuk SPAM dan otomatis tidak akan muncul dalam komentar. hehehe...

Cara agar komentar sobat yang berisi link bisa dengan mudah dan di perbolehkan muncul di blog orang lain, maka silahkan sobat memberikan komentar yang berhubungan dengan tema yang sedang di bahas dalam artikel atau postingan blog tersebut. Intinya berikan komentar yang berguna dan bermanfaat.

Demikian tutorial tips dan trik blog tentang Cara Membuat Link Pada Komentar Blog, semoga bisa sangat bermanfaat bagi sobat KUCOPAS semua.

Selamat Berkarya.

| Supported by http://kuc0pas.blogspot.com |

14.08 | 0 komentar | Read More

Cara Membuat Kotak Komentar Blog Menjadi Menarik

Tutorial Belajar Blog - Cara Membuat kotak Komentar Keren Blog Menjadi Menarik,Pengunjung Tutorial Blog | Tips BLog Kali ini melanjutkan postingan sebelumnya Cara Membuat Kotak Komentar Blog Keren, merupakan request dari teman blogger aguz. Kronolologi Komentar ini Sebelum nya saya tertarik dengan komentar blogmate om-dayz sempat bingung bagaimana membuat kotak komentar, akan tetapi dengan usaha akhirnya bisa juga.
Ini Priview nya

Untuk berjaga-jaga, ada baiknya jika kita backup dulu template kita, siapa tau ada kesalahan yang tak terduga

Centang "Expand Widget HTML" ( bila perlu ) Kemudian copy semua kode berikut ini tanpa terkecuali agar berhasil di atas code ]]></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;}

Kemudian simpan dan lihat hasilnya….!Semoga sesuai keinginan ya…! Kalau gak berhasil, wah keterlaluan, Cuma copas script doank gak bisa… :D hehehe

Selamat mencoba dan semoga bermanfaat..

05.01 | 0 komentar | Read More

Cara Membuat Kotak Komentar Blog Keren

Tutorial Belajar Blog - Cara Membuat kotak Komentar Keren,Pengunjung Tutorial Blog | Tips BLog Kali ini saya ingin membuat postingan tentang membuat Kotak Komentar Blog .Sebelum nya saya tertarik dengan komentar blogmate om-dayz sempat bingung bagaimana membuat kotak komentar, akan tetapi dengan usaha akhirnya bisa juga walapun sedikit berbeda.
Ini Priview nya

Untuk berjaga-jaga, ada baiknya jika kita backup dulu template kita, siapa tau ada kesalahan yang tak terduga

Centang "Expand Widget HTML" ( bila perlu )

Kemudian copy semua kode berikut ini tanpa terkecuali agar berhasil di atas code ]]></b:skin>

/*------------- START tutorialbelajarblogger.blogspot.com Threaded Comments ------------*/
.comments {
clear: both;
margin-top: 10px;
margin-bottom: 0px;
line-height: 1em;
}
.comments .comments-content {
font-size: 12px;
margin-bottom: 16px;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .comment .comment-actions a {
display: inline-block;
margin: 0;
padding: 1px 6px;
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;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
padding:2px 8px; margin-right:10px;
}
.comments .comment .comment-actions a:hover {
text-decoration: none; background:#fff; border:1px solid #5AB1E2;
}
.comments .comments-content .comment-thread ol {
list-style-type: none;
padding: 0;
text-align: none;
}
.comments .comments-content .inline-thread {
padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
display: none;
}
.comments .comments-content .comment-replies {
margin-top: 1em;
margin-left: 40px;   font-size:12px; background:#EBF5FE;
}
.comments .comments-content .comment {
margin-bottom:16px;
padding-bottom:8px;

}
.comments .comments-content .comment:first-child {
padding-top:16px;
}
.comments .comments-content .comment:last-child {
border-bottom:0;
padding-bottom:0;
}
.comments .comments-content .comment-body {
position:relative;
}
.comments .comments-content .user {
font-style:normal;
font-weight:bold;
}
.comments .comments-content .user a {
color:#2D5E7B; font-size:14px; font-weight: bold;text-decoration: none;
}
.comments .comments-content .icon.blog-author {
width: 18px;
height: 18px;
display: inline-block;
margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
color: #999999;
float: right;
font-size: 11px;
text-decoration: none;
}
.comments .comments-content,
.comments .comments-content .comment-content {
margin:0 0 8px;
}

.comment-header {background-color: #F4F4F4;
    border: thin solid #E6E6E6;
    margin-bottom: 5px;
    padding: 5px;
}
.comments .comments-content .comment-content {
text-align:none;
}
.comments .comments-content .owner-actions {
position:absolute;
right:0;
top:0;
}
.comments .comments-replybox {
border: none;
height: 250px;
width: 100%;
}
.comments .comment-replybox-single {
margin-top: 5px;
margin-left: 48px;
}
.comments .comment-replybox-thread {
margin-top: 5px;
}
.comments .comments-content .loadmore a {
display: block;
padding: 10px 16px;
text-align: center;
}
.comments .thread-toggle {
cursor: pointer;
display: inline-block;
}
.comments .continue {
cursor: pointer;
}
.comments .continue a {
display: inline-block;
margin: 0;
padding: 1px 6px;
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;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
padding:2px 8px; margin-right:10px;
}
.comments .comments-content .loadmore {
cursor: pointer;
max-height: 3em;
margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
max-height: 0px;
opacity: 0;
overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
display: none;
}
.comments .thread-toggle {
display: inline-block;
}
.comments .thread-toggle .thread-arrow {
display: inline-block;
height: 6px;
width: 7px;
overflow: visible;
margin: 0.3em;
padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {background-image: url("http://img846.imageshack.us/img846/7357/unled1oww.jpg");background-position: center center;background-repeat: no-repeat;float: left;width: 36px;max-height: 36px;margin: 0;outline: 1px solid #FFFFFF;padding: 3px;vertical-align: middle;overflow: hidden;
border: 1px solid #DDDDDD;}
.comments .avatar-image-container img {
width: 36px;
}
.comments .comment-block {
margin-left: 48px;
position: relative;
}

/* Responsive styles. */
@media screen and (max-device-width: 480px) {
.comments .comments-content .comment-replies {
    margin-left: 0;
}
}
/*--------- End tutorialbelajarblogger.blogspot.com Blogger Threaded Comments ----------*/

Kemudian simpan dan lihat hasilnya….! Semoga sesuai keinginan ya…! Kalau gak berhasil, wah keterlaluan, Cuma copas script doank gak bisa… :D hehehe :P #LOl

nah biar tampilan nya menjadi lebih menarik seperti Thread komentar saya, anda bisa tambah code CSS berikut, letakkan di bawah ]]></b:skin>

<style type='text/css'>

/*Start Modif kotak Komentar*/
.comments .comments-content .icon.blog-author{
background-repeat:no-repeat;background-image:url(http://img2.blogblog.com/img/icon18_edit_allbkg.gif);
}
.comments .comments-content .datetime a{float:right;
}
.comments .comments-content .comment:last-child,.comments .comments-content .comment-thread ol li{font:14px Verdana;color:#fff;background:rgba(0,0,0,.5);padding:5px;margin:2px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;box-shadow:inset 0 0 30px #fff;-moz-box-shadow:inset 0 0 30px #fff;-webkit-box-shadow:inset 0 0 30px #fff;
}
.comment-actions a{
background:#dad6cf;-moz-border-radius:2px;border-radius:2px;-webkit-border-radius:2px;font:12px Verdana;padding:4px;margin:5px;height:16px;border:1px solid #c1c1c1;
}
.comments .comment .comment-actions a:hover,.comments .continue a:hover{
text-decoration:none;background:#ab9e9e;border:1px solid #5AB1E2;
}
.avatar-image-container{
-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;border:4px inset #000;
}
.comments .continue a{display:inline-block;border:1px solid #C4C4C4;text-align:center;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background:#000;font:14px Verdana;color:#fff;padding:2px 8px;margin-right:10px;
}
.deleted-comment{color:gray;font-style:italic;
}
/*End Modif kotak Komentar*/
</style>

OK selesai, coba lihat bagaimana tampilan komentar anda…!

Jangan Lupa tinggalkan Komentar sobat2 ya...

04.43 | 0 komentar | Read More

Cara Membuat dan Memasang Widget Recent Comment Di Blog Tanpa Edit HTML

Cara Membuat dan Memasang Widget Recent Comment Di Blog Tanpa Edit HTML - Setelah kemarin saya telah memberikan tips tutorial blog tentang Cara Membuat Dan Menambah 2 (Dua) Kolom Elemen di Bawah Postingan Blog, Kali ini saya akan berbagi tips dan trik lagi yang cukup ringan namun semoga saja dapat sangat bermanfaat untuk sobat KUCOPAS semua.

Tips dan triknya adalah tentang Cara Membuat dan Memasang Recent Comment Di Blog Tanpa Edit HTML. Sedikit pencerahan maupun pengertian untuk sobat yang mengikuti dan membaca posting ini, Bahwa Recent Comment yang akan saya kasih triknya adalah Recent Comment yang bagus, Karena Recent Comment ini mempunyai fungsi akan menampilkan foto dari empunya yang comment di blog sobat, Recent Comment berarti Comment yang paling akhir pada semua posting yang di kirim pada blog sobat.

Cara memasang recent comment di blog sobat terbilang sangat mudah, Karena sobat tidak perlu repot-repot meng-Edit template yang mungkin sangat rumit untuk menempatkan kode script tersebut. Tampilan recent comment ini sangat enak di pandang, dinamis, tidak amburadul dan tentunya sedap di pandang mata para pengunjung blog kita.

Fungsi yang selanjutnya dari memasang recent comment ini di blog sobat adalah untuk memudahkan sobat lebih cepat untuk mengetahui comment terbaru yang masuk di blog sobat yang di kirim oleh pemirsa atau pengunjung blog dan tentunya sobat tanpa susah-susah mencarinya satu-persatu dalam semua postingan blog sobat. Sehingga sobat bisa lebih cepat untuk membalas comment dari para pengunjung blog. Karena menurut para Master blogger, Membalas comment dari pemirsa atau pengunjung blog adalah sifat yang Etis, Peduli, dan bersungguh-sungguh dalam mengurus blog. Because, "Visitor is Money".

Tampilan dari Recent Comment yang akan kita buat dan pasang ini kurang lebih akan seperti gambar di bawah ini:

Cara Membuat dan Memasang Recent Comment Di Blog Tanpa Edit HTML

Jika sobat tertarik untuk memasangnya di blog sobat, Seperti yang sudah pasang di Sidebar blog ini, Silahkan ikuti langkah-langkahnya sebagai berikut:

1. Silahkan Sobat >> Login/Masuk ke Blog dengan akun Sobat.
2. Kemudian di Dashboard blog, Pilih Menu >> Layout/Tata Letak.
3. Setelah itu sobat pilih atau tentukan dimana kira-kira "Recent Comment" akan sobat taruh atau letakkan. Pilih >> Add Gadget/Tambah Gadget. Lalu pilih >> HTML/Javascript.
4. Silahkan Sobat Masukkan semua Code Script di bawah ini pada kotak HMTL/Javascript.

Catatan:

height: 200px; adalah ukuran Tinggi kotak scroll, silahkan sobat ganti nilainya sesuai dengan keinginan sobat.
max-results=5 : adalah jumlah komentar yang akan ditampilkan pada blog sobat.
avatarSize = 50 : adalah ukuran pixel foto atau gambar (avatar) yang akan di tampilkan.
characters = 60 : adalah Jumlah karakter huruf komentar yang akan di tampilkan.
Warna Merah : Silahkan ganti dengan alamat URL blog Sobat.

5. Langkah yang terakhir jangan lupa sobat kasih Judul lalu klik SIMPAN dan lihat hasilnya.

Cara membuat dan memasang recent comment di blog dengan di sertai foto atau gambar avatar telah selesai. Sekarang sobat sudah memiliki recent comment yang terpasang di blog, Semoga sobat tidak ada kesulitan lagi untuk mencari-cari comment terbaru yang di kirim pada blog sobat.
Salam Blogger...

Update: 18/01/2013

| Supported by http://kuc0pas.blogspot.com |

17.23 | 0 komentar | Read More

Berbagi Informasi Bisnis, Berita, Tips & Trik, dll

Cara Membuat Link Pada Komentar Blog

Cara Membuat Kotak Komentar Blog Menjadi Menarik

Cara Membuat Kotak Komentar Blog Keren

Cara Membuat dan Memasang Widget Recent Comment Di Blog Tanpa Edit HTML

Adsense Black Magic

Label

Popular Posts Today