Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Showing posts with label comment. Show all posts

Monday, October 14, 2013

counter comment style

Counter comment style ini dapat mempercantik tampilan komentar blog anda, cara membuat counter comment style ini sangat mudah sebab anda hanya mendesign cssnya tanpa mengedit kode htmlnya. Counter comment ini berada tepat diatas aplikasi komentar halaman blog, coba anda perhatikan counter comment halaman blog ini, yang berada tepat diatas form komentar. Counter comment akan menampilkan jumlah dari semua komentar pada suatu postingan dihalaman tersebut. Tampilan standart dari counter comment ini hanya sebaris tulisan dan saya rasa kurang menarik, jadi ada baiknya kita modifikasi sedikit untuk menambahkan kesan bahwa halaman blog tersebut lebih elegan dan menarik. Untuk melihat contoh demonya silahkan lihat screenshotnya dibawah ini atau lihat tampilan counter comment pada halaman blog ini, diatas aplikasi komentar blog ini. Langsung saja menuju TKP dan simak cara memodifikasinya.

counter comment style

Install Program CSS


  1. Login ke dashboard anda
  2. Masuk ke "TEMPLATE" lalu klik " Edit HTML " kemudian lihat bagis CSS ( kode yang berada diatas kode ]]></b:skin> atau </style> )
  3. Cari kode #comments h4 atau sejenisnya. setelah ketemu ganti semua kode yang bersangkutan dengan kode #comments h4 pada template anda dengan kode CSS yang berada didalam spoiler dibawah ini.
  4. Perhatikan kode CSS dibawah ini, yang perlu anda hapus kode pada template anda adalah kode yang sama dengan kode CSS dibawah ini, agar tidak memiliki 2 kode yang sama paa template anda, bila memang template anda tidak memiliki kode tersebut, langsung saja paste kode dibawah ini ke template anda.

/*****************************************
Name : Counter comment style
By : Rivai Silaban | Blog Design
Update : Senin, 14 Oktober 2013
******************************************/
#comments h4 {
padding : 10px;
line-height : 30px;
margin-left:20px;
}
#comments h4, .comments .comment-header, .comments .comment-thread.inline-thread .comment {
position : relative;
}
#comments h4, .comments .continue1 a {
position:relative;
padding:5px 10px;
color:#fff;
border-radius:10px;
width:200px;
font-family: Georgia;
text-align: center;
border:solid #444 3px;
}
#comments h4, .comments .user a, .comments .continue1 a {
font-size : 18px;
}
#comments h4, .comments .continue1 a {
font-weight : bold;
color : #EBEBEB;
font-family: Verdana;
text-shadow: 3px 1px 2px #000;
background-color: #0099FF;
font-size: 18px;
font-style: italic;
}
#comments h4:after {
content:"";
display:block;
position:absolute;
bottom:-20px;
left:80px;
width:0;
height:0;
border-width:0;
border-right-width:10px;
border-bottom-width:20px;
border-style:solid;
border-color:transparent #444;
}
#comments h4:before {
content:"";
display:block;
position:absolute;
bottom:-20px;
left:60px;
width:0;
height:0;
border:0;
border-right-width:30px;
border-bottom-width:20px;
border-style:solid;
border-color:transparent #0099FF;
}/*** Blog Design CSS and ***/


Kesimpulan

Counter comment style ini merupakan suatu modifikasi untuk mempercantik tampilan komentar pada halaman blog agar lebih elegan dan menarik.

Bila anda mengalami kesulitan dalam pemasangan kode CSS ini pada halaman blog anda atau menemukan kode yang error silahkan hubungi saya atau share bersama saya pada form komentar dibawah ini.

Counter comment style
Senin, 14 Oktober 2013
Owner Blog Design Rivai Silaban

Di poskan oleh : Unknown | Dipublish pada : 10:07 AM | 6 komentar
Read More

Sunday, September 29, 2013

style thread komentar blogger

Style komentar untuk jenis thread comment ini valid html 5 dan CSS 3, cara membuat style thread komentar blogger valid html 5 kali ini hanya mengandalkan editan CSS untuk merubah suatu tampilan sistem komentar blogger agar memiliki tampilan lebih menarik. Pada postingan kali ini saya kita hanya mengandalkan design CSSnya tanpa merubah code tag html dan script thread commentnya, Jadi sangat cocok untuk halaman blog yang memang sistem thread commentnya belum di rubah atau dapat juga anda pergunakan untuk template responsive. Oke langsung saja menuju TKP dan simak penjelasan tutorial cara memasangnya dibawah ini, sekalian lihat demonya melalui link icon demo dan lihat screenshotnya dibawah ini.


Demo



style thread komentar blogger

Install Program CSS


  • Login ke dashboard anda
  • Masuk ke "TEMPLATE" lalu klik " Edit HTML "
  • Saran saya buat teman teman yang belum mengerti benar HTML silahkan download dulu tag XML Template anda untuk mencegah kesalahan Fatal.
  • Saatnya anda mencari code ]]></b:skin> 
  • Bila sudah silahkan ketemu cari code yang berurusan dengan #comment .comments, setelah ketemu semua hapus semua code tersebut sebab kita akan menggantikan code CSSnya agar tidak ada error CSS codenya.
  • Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.

/*****************************************
Name :Style Thread Comment Blogger
By : Rivai Silaban | Blog Design
Update : Minggu, 29 September 2013
******************************************/
#comments h4 {
display : inline;
padding : 10px 20px 10px 20px;
line-height : 60px;
}
#comments h4, .comments .comment-header, .comments .comment-thread.inline-thread .comment {
position : relative;
margin-left:50px;
}
#comments h4, .comments .continue1 a {
background: #0099FF;
}
#comments h4, .comments .user a, .comments .continue1 a {
font-size : 16px;
font-family: Georgia, "Times New Roman", Times, serif;
text-shadow: none;
font-style: italic;
}
#comments h4, .comments .continue1 a {
font-weight: bold;
color : #fff;
}
#comments h4:after {
content : "";
position : absolute;
bottom : -10px;
left : 10px;
border-top : 10px solid #0099FF;
border-right : 20px solid transparent;
width : 0;
height : 0;
line-height : 0;
}
.comments-content {background-color: #ccc;}
.comments .comment-block{
margin-left:0;
position:relative;
}
.comments .comments-content .user a{
margin-bottom:-3px;
color:#0000FF;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
font-weight: bold;
font-size: 14px;
}
.comments .comments-content .icon.blog-author{ display:inline-block; float:left; margin:0px 70px 10px -10px;}
.comments .comments-content .icon.blog-author:before{ content:"Admin"; line-height:20px; position:absolute; top:5px; text-align:center; font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
color: #990000;
font-style: italic;
font-weight: bold;
text-shadow: 2px 1px 1px #999;}
.comments .comments-content .datetime{
font-size:10px;
line-height:10px;
display:block;
margin:-5px 10px 0 0;
}
.comments .comments-content .datetime a, .comments .comments-content .datetime a:hover{ color:#999; text-decoration:none}
.comments .avatar-image-container{
padding-left:0;
margin:5px 10px 5px 15px;
max-height:48px;
width:48px;
float:LEFT;
z-index:9;
}
.comments .avatar-image-container img{
max-width:44px;
width:44px;
border-radius:5px 5px 5px 0;
border:1px #000 ;
display:block;
}
.comments .comments-content .comment, .comments .avatar-image-container{ padding:4px;}
.comments .comments-content{ margin-bottom:10px}
.comments .comments-content .comment{margin:0 5px 0 40px}
.comments .comments-content .comment-content{padding:30px 10px 50px 10px;
margin:15px 0 -18px -25px;
position:relative;
background-color:#C1F2FF;
color:#333;
height:auto;
border-radius:3px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
font-style: italic;
box-shadow: 0 0 2px #000;
border:solid #000000 1px;line-height:1.2em; }
.comments .comments-content .comment-content:before{
content:"";
width:0;
height:0;
position:absolute;
bottom:100%;
left:20px;
border-width:0 0 22px 22px;
border-style:solid;
border-color:transparent transparent #C1F2FF transparent;
}
.comments .comment .comment-actions a{
position:relative;
background-color:#000099;
color:#ebebeb;
margin:0 10px 0 -7px;
border-radius:3px 3px 0 0;
}
.comments .comment .comment-actions a, .comments .continue a{
font:bold 12px Arial,Helvetica,sans-serif;
padding:3px 10px;
text-align:center;
}
.comments .continue{
cursor:pointer;
display:none;
margin:0 10px 0 0;
background:#333;
width:50px;
float:right;
height:20px;
color:#fff;
border-radius:0 0 3px 3px;
}
.comments .continue a:hover, .comments .comment .comment-actions a:hover{ color:black; text-decoration:none}
.comments .comments-content .comment-thread{ margin:0; background-color:#FFF;}
.comments .comments-content .comment-replies{ margin-left:0; margin-top:0}
.comments .comments-content .comment-header{ position:relative; min-height:37px; line-height:37px; padding-left:10px}
.comments .thread-toggle{ cursor:pointer; display:none}
/* CSS End */

Bila anda ingin mengganti warna sesuai dengan tampilan halaman blog anda silahkan edit CSSnya.
Untuk style komentar blogger jenis yang lain silahkan kunjungi Design thread comment .



Kesimpulan

Style thread komentar blogger pada postingan kali ini valid html 5 dan CSS 3, dengan style gelembung akan menambahkan tampilan komentar halaman blog kesayangan anda lebih menarik.

Bila anda mengalami kesulitan dalam pemasangan style thread komentar blogger ini atau menemukan kode yang error silahkan hubungi saya atau share dengan saya di form komentar dibawah ini.

Style thread komentar blogger valid HTML 5 dan CSS 3
Minggu, 29 September 2013
Rivai Silaban | Blog Design

Di poskan oleh : Unknown | Dipublish pada : 11:28 AM | 14 komentar
Read More

Friday, August 30, 2013

cara membuat pesan komentar valid html5

Pesan komentar valid html 5 dan tentunya seo friendly sangat dibutuhkan seorang bloger, cara memasang Pesan Komentar di halaman blog juga beraneka ragam. Pentingnya suatu pesan komentar buat para pengunjung yang akan berkomentar menjadi suatu aturan tersendiri buat pengunjung blog tersebut. pada postingan kali ini saya terinspirasi dari seorang sahabat yang memang membutuhkan script Pesan Komentar, semoga beliau merasa senang atas tampilan pesan komentar ini walaupun memang tampilannya sederhana.


fungsi Pesan Komentar


Pesan Komentar ini berfungsi untuk memberikan suatu pesan aturan dari tata cara menyampaikan sebuah komentar untuk sebuah artikel yang telah kita posting pada halaman blog kita. Sebagai fungsi suatu pesan aturan, kita akan menuliskan suatu pesan yang memang benar benar ringkas jelas dan tidak bertele tele. Sebuah pesan yang disampaikan buat para pengunjung yang akan menjadi sebuah aturan dalam berkomentar harus dituliskan dengan serba sopan santun agar para pengunjung kita tidak merasa tersinggung, sebab suatu kunjungan sangat berharga buat suatu halaman blog kita. Dalam postingan saya kali ini, sebuah pesan dalam halaman blog akan kita buat, dan akan saya uraikan melalui tag tag html agar dapat kita sisipkan dalam tubuh tag HTML blog kita. Saya beharap sahabat sahabat bloger saya sudah memahami kegunaan dari Pesan Komentar yang akan kita buat pada halaman blog kita. Langsung saja menuju TKP

Lihat screen shoot gambar pesan komentar yang akan kita buat dibawah ini.

cara membuat pesan komentar valid html5


Fitur Pesan Komentar


  • Text Pesan Komentar
  • Form Email Subscribe
  • Tombol Join to Blog
  • Tombol Konversi Kode
  • Tombol Forum Diskusi
    Tombol Link Exchange
  • Tombol sosial media Gplus, Twitter, Facebook
  • Gift image Feedburner logo

Artikel pendukung


  • Cara membuat pesan komentar BAG 1
  • Cara membuat pesan komentar BAG 2
  • Banyak para bloger kesal akibat pesan komentarnya selalu melorot kebawah kotak komentar, tapi saya sudah mempunyai solusinya temukan solusinya dan lihat pada tutorial Cara mengatasi kesalahan pesan komentar

Install Program CSS


  1. Login ke dashboard anda
  2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
  3. Cari code ]]></b:skin> 
  4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda

/*****************************************
Name : Pesan Komentar
By : Rivai Silaban | Blog Design
Update : 30 Agustus 2013
******************************************/
#bdrspesan-comment {
position : relative;
width : auto;
padding : 10px;
font : normal normal 12px trebuchet ms;
text-align : justify;
border : #000 solid 3px;
margin : 0 10px 10px 3px;
margin-top : 10px;
line-height : 1.3em;
background-color: #666666;
color: #FFFFFF;
}
#bdrspesan-comment strong {color:#99FF00}
#bdrspesan-comment::after, #bdrspesan-comment::before {
top : 100%;
border : transparent solid;
content : '';
height : 0;
width : 0;
position : absolute;
}
#bdrspesan-comment::before {
border-top-color : #000;
border-width : 15px;
left : 10%;
margin-left : -36px;
}
#bdrspesan-comment::after {
border-top-color : #666;
border-width : 9px;
left : 10%;
margin-left : -30px;
}
#bdrspesan-comment .BD-but{
border:1px solid #b0130d;
color:#000000;
cursor:pointer;
font-weight:100;
margin:5px -10px 0px 0;
text-decoration:none;
text-shadow:none;
display:inline-block;
box-shadow: 0 1px 0 0 #fff inset;
background-color:#00CCFF;
padding:5px 10px;
border-color: #333;
border-radius:5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
#bdrspesan-comment .BD-but:hover{
color:#99FF00;
text-shadow:none;
border:1px solid ;
display:inline-block;
box-shadow:0 0px 2px 0px #FFF;
background-color:#333333;
border-color: #333;
}
#bdrspesan-comment .BD-box {
margin-top : 0px;
padding : 0 0px;
text-align: right;
}
#bdrspesan-comment .input {
font-size : 12px;
padding : 10px 5px;
text-shadow : 1px 1px 0 #FFF;
width : 200px;
color : #990000;
font-family : georgia;
border : solid 1px;
border-color : #0099FF;
background-color: #E1FBFB;
border-radius:5px;
margin-bottom: 2px;
}
#bdrspesan-comment .input:hover {
background-color: #FFFFFF;
}
#bdrspesan-comment .submit {
border: solid 1px;
color : #000000;
cursor : pointer;
font-family : verdana;
font-size : 12px;
padding : 10px 15px;
border-radius:5px;
text-shadow : 0px 1px #999;
text-transform : uppercase;
height : auto;
background-color : #00CCFF;
border-color : #000099;
font-style: italic;
font-weight: normal;
margin-left:4px;
}
#bdrspesan-comment .submit:hover {
background-color :#2FD6FF;
box-shadow: 1px 1px 5px #333;
color : #990000;
text-shadow: none;
}/*** Blog Design CSS and ***/


Install tag html


  • Setelah kode CSSnya sudah terpasang kini saatnya kita akan memasukkan kode tag htmlnya. disini saya akan menjelaskan pemasangan pesan komentar untuk blog standart.
  • Pencarian I -- coba anda cari kode <p><data:blogCommentMessage/></p> . Kode tersebut terdiri dari 4 kode yang sama pada 2 tempat berbeda, Untuk melihat 2 kode <p><data:blogCommentMessage/></p> coba cari kode <b:includable id='comment-form' var='post'> setelah anda buka keseluruhan kodenya silahkan cari kode <p><data:blogCommentMessage/></p> pastinya anda akan menemukan 2 kode serupa. Silahkan Copy Kode tag HTmL didalam spoiler yang ada dibawah dan ganti kode <p><data:blogCommentMessage/></p> dengan kode yang anda copy. Ingat.. !! Gantikan pada kedua kode <p><data:blogCommentMessage/></p> tersebut.
  • Pencarian II -- coba anda cari kode <b:includable id='threaded-comment-form' var='post'> ( kode ini berada pada bagian comment ) setelah anda sudh menemukan kode tersebut buka keseluruhan kodenya silahkan cari kode <p><data:blogCommentMessage/></p> pastinya anda akan menemukan 2 kode serupa. Silahkan Copy Kode tag HTmL didalam spoiler yang ada dibawah dan ganti kode <p><data:blogCommentMessage/></p> dengan kode yang anda copy. Ingat.. !! Gantikan pada kedua kode seperti mengganti kode pada pencarian pertama.
  • Save template anda dan lihat hasilnya.


  • Untuk Memasang kode pesan komentar ini pada beberapa template yang telah saya buat, silahkan ada cari kode <div id='pesan-comment'><data:blogCommentMessage/></div> didalam bagian kode <b:includable id='comment-form' var='post'>, ada 2 kode serupa silahkan ganti kode <div id='pesan-comment'><data:blogCommentMessage/></div> dengan kode yang ada pada spoiler dibawah ini. gantikan pada ke 2 kode yang sama.

    Setelah terpasang cari kembali code <b:includable id='threaded-comment-form' var='post'> ( kode ini berada pada bagian comment ) lihat kode bagian dalamnya anda pasti menemukan 2 kode <div id='pesan-comment'><data:blogCommentMessage/></div> yang sama silahkan gantikan kode tersebut dengan kode didalam spoiler dibawah ini seperti mengganti kode pencarian yang pertama.
  • Save halaman anda dan lihat hasilnya, semoga bermanfaat.

<!-- Rivai Silaban | BLOG DESIGN Pesan Komentar start -->
<div id='bdrspesan-comment'>
<span class='BD-box'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=ID FEEDBURNER &apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=600,height=550&apos;);return true' target='popupwindow'>
<img alt="feedburner" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3bN5pC-AX7lWJ8TRgxtYQzGLBunJatZfqFjvcgLuE3tB5vkXcvEDQkG5hVfQHZ5yYJRhhnzNigzOKu8qJlrVwBwOrJWtDChbs2b6CDAQK5ObSgOV0Jod5TvXgVr_siKS0JY8kR8RNlL8/h77/feedburner.png" title='feedburner' style="margin-bottom:-9px;margin-right:25px;"/> <input name='email' type='text' class='input' onblur='if (this.value == &apos;&apos;) this.value = &apos;Enter email here !!&apos;;' onclick='if (this.value == &apos;Enter email here !!&apos;) this.value = &apos;&apos;;' value='Enter email here !!' />
<input class='submit' id='submit' name='submit' title='subscribe' type='submit' value='SUBSCRIBE'/>
<input name='uri' type='hidden' value='ID FEEDBURNER'/>
<input name='loc' type='hidden' value='en_US'/>
</form></span>
<div style="font-family:Georgia, 'Times New Roman', Times, serif; color: #FFFF00; font-size: 14px; font-style: italic; font-weight: bold; width: 100%; background-color: #999999; margin: 15px -20px 5px -10px; padding:10px; text-shadow: 1px 1px 1px #000;">Salam bloger .. !! <br />
Pergunakan fasilitas yang dapat membantu anda pada halaman blog ini. </div>
<p> 1. Komentar <strong>SPAM</strong> Akan secepatnya dihapus <br/>
2. Pastikan untuk &quot; <strong>Berlangganan Lewat Email </strong>&quot; untuk membangun kreatifitas blog ini <br/>
3. Cek komentar masuk sebelum bertanya. <br/>
4. Link aktiv tidak akan berpungsi. <br/>
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya. <br/>
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik &quot;<strong> Forum Diskusi </strong>&quot; <br/>
7. Bergabung dengan kami untuk menjadi member Klik &quot;<strong>Join to Member</strong> &quot; <br/>
8. Bila komentar anda mengandung code HTML silahkan anda konversikan terlebih dulu<br/>
silahkan klik &quot; <strong>Konversi Kode </strong>&quot; <br/> </p>

<a class='BD-but' href='http://rivai-silaban.blogspot.com/p/k-onversi-kode-html-adalah-suatu-sistem.html'
onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;
height=500,width=700,toolbar=yes,location=yes,status=yes,menubar=yes,
scrollbars=yes,resizable=yes&quot;);return false;'
target='_blank' title='Konversi Kode'>Konversi Kode</a>
<a class='BD-but' href='LINK ANDA' target='_blank' title='Forum Diskusi'>Forum Diskusi</a>
<a class='BD-but' href='http://www.blogger.com/follow-blog.g?blogID=ID BLOG ANDA' rel='nofollow' target='_blank' title='Join to Blog'>Join to Blog</a>
<a class='BD-but' href='LINK ANDA' target='_blank' title='LINK EXCHANGE '>LINK EXCHANGE </a>
<a class='BD-but' href='LINK ANDA' target='_blank' title='GPLUS'>GPLUS</a>
<a class='BD-but' href='LINK ANDA' target='_blank' title='FACEBOOK'>FACEBOOK</a>
<a class='BD-but' href='LINK ANDA' target='_blank' title='TWITTER'>TWITTER</a> </div>
<!-- Rivai Silaban | BLOG DESIGN Pesan Komentar End -->

Keterangan Code
  • Tulisan kode warna MERAH ganti dengan link menu anda sematkan ID FEEDBURNER anda.
    Untuk title dan menu harus sama penulisannya biar lebih SEO Friendly lihat tulisan warna BIRU .
  • Tulisan warna BIRU nama dan judul menu linknya .
  • Untuk kode warna HIJAU silahkan ganti dengan pesan anda sendiri agar lebih abdol
  • Silahkan edit CSSnya sesuai dengan tampilan halaman blog anda.

Kesimpulan

Widget Pesan Komentar ini sangat berguna buat para bloger untuk membuat suatu aturan atau pesan singkat untuk para pengunjung blog agr lebih paham terhadap peraturan dari blog tersebut.

Widget Pesan Komentar ini Valid HTML 5 dan SEO friendly tentunya sebab menganut sistem penulisan tag html yang standart peraturan SEO yang berlaku saat ini. Kode yang ringan dan tampilan yang lumayan menarik menjadikan widget ini sebagai pilihan para bloger.

Massage Alert Comment
Minggu, 30 Agustus 2013
By : Admin Blog Design

Di poskan oleh : Unknown | Dipublish pada : 5:33 PM | 21 komentar
Read More

Wednesday, July 31, 2013

solusi kesalahan membuat pesan komentar diblog

Cara membuat pesan komentar pada postingan kali ini adalah solusi dari tidak tampilnya dengan maksimal pesan komentar yang telah saya posting jauh jauh hari sebelumnya. Update dari artikel yang telah saya buat kali ini mengantisipasi pesan komentar yang setiap pengunjung memberikan komentar pesan tersebut selalu melorot kebawah kotak komentar dan ada juga teman teman yang lain yang mengalami ketidak munculan suatu pesan komentar pada halaman blognya walau semua tutorial yang telah saya paparkan sudah dilaksanakan. Adanya sampel dari teman yang telah dikirim lewat email kepada saya membuat saya berpikir suatu kesalahan yang dapat menyebabkan ketidak sempurnaan pesan komentar tersebut pada sebuah halaman. Keluhan keluhan yang masuk ke email saya yang telah saya baca. Ada baiknya anda lihat dulu halaman cara membuat pesan komentar diblog agar lebih memahami tentang artikel yang telah saya posting ini, kunjungi http://rivai-silaban.blogspot.com/2013/07/cara-membuat-pesan-komentar-di-blogspot.html


Tidak munculnya pesan komentar pada halaman blog


Akibat dari tidak munculnya pesan komentar pada halaman blog setelah saya selidiki dan ternyata keselahan tersebut bukanlah pada pesawat komputer anda melainkan hanya kesalahan kode html he he he....Ada 2 faktor yang sangat berpengaruh, pada kasus ini, saya berharap anda dapat memahaminya dengan baik.

  1. Faktor akibat kode html komentar yang telah dimodifikasi secara keseluruhan. Bagi para pembuat template hal ini tidak merupakan sebuah kesalahan sebab bila kita membuat suatu template pasti kia akan membuat suatu template yang berbeda dengan yang lain, agar terkesan lain dan unik. Biasanya komentar pada halaman blog sering dirubah agar terlihat lain dari yang lain. jadi solusi yang terbaik adalah membuat suatu pesan komentar secara manual dengan membuat tag tag html secara langsung ketubuh blog. kunjungi halaman berikut : http://rivai-silaban.blogspot.com/2013/06/cara-membuat-pesan-komentar-di-blog.html
  2. Faktor menempatkan kode yang salah dan kurang sempurna pada tubuh halaman blog membuat tidak munculnya pesan komentar. coba perhatikan dengan teliti code yang di copas, harus semua code di copas dengan baik. Dari kasus yang telah saya lihat terkadang kesalahan tidak munculnya pesan komentar pada halaman blog akibat salahnya penempatan kode CSS pada tubuh ]]></b:skin> pada template responsive atau semi responsive. Template ini memang memakai sistem screen yang telah disesuaikan alias tidak bebas, oleh karena itu bila anda salah meletakkan semua code CSS ketubuh ]]></b:skin>  template banyak kemungkinan error dan tidak munculnya pesan komentar tersebut.

Solusi Bila anda belum paham benar tentang mengotak atik tag html halaman blog anda, ada baiknya anda memasang pesan komentar secara manual saja bukan secara otomatis agar lebih sempurnah dan maksimal pada halaman blog anda. Kunjungi link warna biru diatas untuk tehnik memasang pesan komentar secara manual ditubuh halaman blog.

Pesan komentar yang selalu melorot kebawah kotak form komentar
Masalah ini diakibatkan oleh kurangnya beberapa code pada script dan html comment halaman blog, untuk mengatasi hal ini anda perlu manambahkan kode ke tubuh blog anda, silahkan simak penjelasan dibawah ini.

Install Program CSS


  1. Login ke dashboard anda
  2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
  3. Cari kode dibawah ini.

  4. <b:includable id='threaded-comment-form' var='post'>
    <div class='comment-form'>
    <a name='comment-form'/>
    <b:if cond='data:mobile'>
    <p><data:blogCommentMessage/></p>
    <data:blogTeamBlogMessage/>
    <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
    <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
    <b:else/>
    <p><data:blogCommentMessage/></p>
    <data:blogTeamBlogMessage/>
    <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
    <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </b:if>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
    BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </script>
    </div>
    </b:includable>


  5. Setelah ketemu, coba perhatikan kode tersebut , silahkan hapus kodenya dari kode tulisan warna MERAH atas sampai kode tulisan warna MERAH yang dibawah.
  6. Kemudian ganti dengan kode html yang ada dibawah ini.

  7. <b:includable id='threaded-comment-form' var='post'>
    <div class='comment-form'>
    <a name='comment-form'/>
    <b:if cond='data:mobile'>
    <div id='bdform-wrapper'>
    <p><data:blogCommentMessage/></p>
    <data:blogTeamBlogMessage/>
    <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
    <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
    </div>
    <b:else/>
    <div id='bdform-wrapper'>
    <p><data:blogCommentMessage/></p>
    <data:blogTeamBlogMessage/>
    <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
    <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </div>
    </b:if>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
    BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </script>
    </div>
    </b:includable>


  8. Setelah anda ganti kodenya saatnya kita poles sedikit lagi scriptnya untuk lebih maximal.
  9. Cari kode tag dibawah ini pada template anda
     document.getElementById(domId).insertBefore(replybox, null);
    Biasanya kode tersebut ada pada script komentar ,
  10. ganti kode script yang diatas menjadi kode script dibawah ini.
     document.getElementById(domId).insertBefore
    (document.getElementById('bdform-wrapper'), null);

  11. Setelah selesai saatnya anda klik SAVE untuik menyimpan perubahan.

Keterangan Code
  • Tulisan kode warna MERAH atas sampai kode warna MERAH dibawah harus secara keseluruhan anda hapus kemudian masukkan kode pengganti lihat didalam spoiler " Kode Yang Diganti ")
  • Cari kode warna HIJAU seperti diatas, setelah ketemu ganti dengan code warna BIRU. Biasanya kode ini berada pada tag html blog

Kesimpulan

Mengantisipasi pesan komentar halaman blog yang tidak muncul dan pesan komentar yang selalu berada dibawah kotak form komentar

Di poskan oleh : Unknown | Dipublish pada : 11:44 PM | 8 komentar
Read More

Sunday, July 28, 2013

cara membuat counter comment diblog

Counter comment ini dapat memberikan kesan profesional pada comment content halaman blog anda, tampilan yang unik membuat kepuasan design tersendiri buat pengguna blog. Counter comment ini berdigit decimal dan terpasang pada comment content halaman blog. Counter comment ini akan menampilkan nomer komentar yang telah dipublish. Disamping membuat halaman anda unik terutama bagian kotak komentar, Counter comment ini juga akan membedakan jenis replay dan komentar baru dengan menampilkan angka angka yang berbeda. Sistem pengoperasian dari Counter comment ini hanya di edit pada bagian CSS tanpa mempengaruhi loading halaman blog kesayangan anda. Counter Comment ini masih berfungsi sangat stabil pada komentar sistem Thread. Untuk sistem comment single seperti form komentar facebook hal ini tidak begitu maksimal. Oke dari pada nunggu lama ngak sabaran mari langsung saja menuju TKP. Untuk DEMO silahkan kunjungi :
http://themsseo001.blogspot.com/2013/07/tersedia-fitur-untuk-iklan-anda.html


Install Program CSS


  1. Login ke dashboard anda
  2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
  3. Cari code ]]></b:skin> 
  4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi

.comment-thread ol {
counter-reset: countcomments;
}
.comment-thread li:before {
content: counter(countcomments,decimal);
counter-increment: countcomments;
float: right;
font-size: 22px;
color: #FFA6A4;
padding-right: 30px;
padding-top: 26px;
margin-top: 10px;
margin-left: 24px;
}
.comment-thread ol ol {
counter-reset: contrebasse;
}
.comment-thread li li:before {
content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin);
counter-increment: contrebasse;
float: right;
font-size: 18px;
color: #8A8A84;
padding-left: 1px;margin-right:-15px;
padding-top: 15px;
}

Keterangan Code
  • Tulisan kode warna MERAH adalah tataletak counter commentnya, silahkan anda edit sesuai dengan tata letak komentar halaman blog anda.
  • Tulisan warna BIRU adalah ukuran besar kecilnya angka pada counter comment.
  • Tulisan kode warna HIJAU adalah warna dari counter comment tersebut.
  • Bila anda ingin lebih berkreasi silahkan anda edit CSSnya untuk menyesuaikan tampilan related post ini dengan tems template anda.

Kesimpulan

Counter comment ini memberikan keunikan tersendiri pada halaman blog dan menghitung atau membedakan comment sistem replay atau baru. Counter comment ini dapat dipasang pada blog HTML5 dan CSS3, CSS ringan sehingga tidak mempengaruhi loading blog. Counter comment ini berfungsi maksimal pada sistem Thread Comment.

Di poskan oleh : Unknown | Dipublish pada : 10:52 AM | 25 komentar
Read More

Thursday, July 18, 2013

Cara membuat thread comment seo friendly

Design komentar thread comment yang dikeluarkan oleh BLOG DESIGN ini sangat simple dan menawan buat halaman blog anda, tampilan yang elegan dan berkesan ramah ini saya namakan dengan " Elegan Thread Comment ". Pembuatan Design Comment ini terinspirasi atas seorang sahabat yang mengguluti dunia bloging ini. Dihari hari yang lewat saya berkunjung ke blog teman saya itu dan saya sempatkan untuk Komentar, saya melihat ada kekurangan untuk tampilannya sehingga saya berpikir untuk membuatkan satu design yang memakai sistem Modifikasi sistem CSS nya saja. Dilain pihak ada juga seorang sahabat yang minta saran " Bagaimana membuat suatu komentar yang tidak mempunyai script dan lebih ringan loadingnya ? " dalam satu malam ini saya memadukan saran dan inspirasi dari kedua sahabat saya tersebut sehingga saya menjawab mereka dengan tutorial kali ini, semoga tutorial kali ini dapat menjawab semua pertanyaan yang ada. Untuk Melihat DEMO nya silahkan kunjungi halaman ini : http://themsseo001.blogspot.com/2013/07/tersedia-fitur-untuk-iklan-anda.html . Oke setelah anda kunjungi dan sudah melihat Designnya sekarang kita akan menuju TKP untuk mewujudkan misi tersebut.

Cara membuat thread comment seo friendly

Install Program CSS


  • Login ke dashboard anda
  • Masuk ke "TEMPLATE" lalu klik " Edit HTML "
  • Saran saya buat teman teman yang belum mengerti benar HTML silahkan download dulu tag XML Template anda untuk mencegah kesalahan Fatal.
  • Saatnya anda mencari code ]]></b:skin> 
  • Bila sudah silahkan ketemu cari code yang berurusan dengan #comment .comments, setelah ketemu semua hapus semua code tersebut sebab kita akan menggantikan code CSSnya agar tidak ada error CSS codenya.
  • Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi

/* ----- style Comment Blog Design ----*/
#comments h4 {color:#333;font-size:18px;font-weight:bold;letter-spacing:0;line-height:1.4em;margin:1em 0;text-transform:none;}.comment-content a{display:none!important}.comments-content ol {list-style : none outside none;margin : 0;}.comments-content ol li {border-bottom : 1px solid #DEDEDE;font-size : 12px;line-height : 1.7;margin : 0 0 24px;padding : 0 0 0 76px;position : relative;}.comments-content ol li ol li {border : none;margin : 0;}.comments-content ol li ol .continue {display : block;padding : 0 0 0 10px;margin : 10px 0 24px;}.comments-content ol li cite {color : #000066;font-size : 14px;font-style : normal;font-weight : bold;padding: 0 0 0 5px;}.comments-content ol li span.datetime cite {float : right;color : #fff;font-size : 12px;padding : 0 35px 0 0;}.comments-content ol li span.datetime {float : right;color : #990000;font-size : 12px;padding : 0 35px 0 0;}.comments-content ol li span.datetime a {}.thread-toggle {display : none;}#comments-block {line-height:1.6em;margin-left:30px;font-size: 13px;width:100%;}#comments-block .comment-admin{border 2px solid #000000;}#comments-block .comment-admin a{text-decoration:none;color:#0b9f1d;font-style:bold;}#comments-block .comment-admin a:hover{text-decoration:none;color:#d39e11;font-style:bold;}#comments-block .comment-admin {-moz-background-clip:border;-moz-background-inline-policy:continuous;-moz-background-origin:padding;background:#eee none repeat scroll 0 0;margin:0.5em 0;color:#0b9f1d;padding-bottom:4px;padding-left:8px;padding-top:4px;}#comments-block .comment-body {border-left:1px solid #eeeborder-right:1px solid #eee;margin-top:-7px;padding-left:10px;padding-top:10px;}#comments-block .comment-footer {border-bottom:1px solid #eee;border-left:1px solid #eee;border-right:1px solid #eee;font-size:11px;line-height:1.4em;margin:-0.25em 0 2em;padding-bottom:5px;padding-left:10px;text-transform:none;}#comments-block .comment-body p {margin:0;padding-bottom:15px;}.deleted-comment {color:gray;font-style:italic;} #postlines{margin:5px 0 0 -15px;border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: #D8D8D8;}#comments{margin:20px 20px 0;overflow:hidden; margin-left: -18px; }#comments h4{display:inline;padding:10px;line-height:40px}#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}#comments h4 {background:#0033FF}#comments h4,.comments .user a,.comments{font-size:16px}#comments h4,.comments {font-weight:normal;color:#fff}#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #0033FF;border-right:20px solid transparent;width:0;height:0;line-height:0} .continue a{margin-top : 10px;margin-right:-50px;padding:3px 30px 3px 10px;border-radius: 0 0 10px 0;border: solid #999999 1px;background-color: #003399;color: #FFFFFF; } .continue a:hover{background-color: #000066;color: #FFFFFF;} #comments .avatar-image-container img{border:0} .comment-thread{color:#111} .comment-thread ol{margin:0 0 20px} .comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#3E0000;padding:5px 15px 2px 10px;} .comments .avatar-image-container,.comments .avatar-image-container img{width: 60px; max-width: 60px; height: 60px;float:left; max-height: 60px;margin-bottom: -10px; } .comment-actions a{ text-align: center; margin : 2px 2px 2px 5px; padding:3px 10px; border: solid #999999 1px; background-color: #666666; color: #FFFFFF;border-radius:0 0 5px 5px; } .comment-actions a:hover{ background-color: #CCCCCC; color: #990000; } .comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:70px} .comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#EEEEEE;padding:10px;border-radius:0 0 0 15px;} .comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em; } .comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3BuWdJwWoJtyX8FOvSuRFatcHgb5Blf5SAxtFkyvIptXtt7vWmMSrqnwbD2MQgeVrW2lhMbY77Ii-L57qGINL_9EhdcgDdKMIbKA21WSdtyOU2Jy0SlOvF8vk0kI3olcNJmLKZfLrUV0/s1600/autor-biru.png);width:56px;height:56px} .comments .comments-content .inline-thread{padding:0 0 0 20px} .comments .comments-content .comment-replies{margin-top:0} .comments .comment-content{padding:15px 5px 15px 10px;line-height:1.4em;font-style: italic;color:#990000;border:solid #eee 1px;margin:5px 10px 5px 5px;box-shadow: 1px 1px 1px 2px #C0C0C0 inset;background-color: #FFFFFF;} .comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent} .comments .comment-thread.inline-thread .comment{width:auto} .comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:0px;border-top:1px solid #ddd;width:10px;height:0px} .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: 46px; max-width: 46px; height: 46px;float:left;border-radius:25px; max-height: 46px; margin-bottom: -10px;} #comment-editor{width:103%!important} .comment-form{width:100%;max-width:100%}

Silahkan edit warna dan tampilannya bila anda ingin menyesuaikan tampilan ataupun warnanya untuk Template blog yang anda sayangi, Untuk mengganti gambar icon authornya silahkan kunjungi halaman dibawah ini untuk menganti tampilan gambar Authornya agar lebih kreative dan menarik, Kunjungi halaman ini : http://rivai-silaban.blogspot.com/2013/07/cara-membuat-icon-author-comment.html



Kesimpulan

Design Thread Comment yang saya beri nama " Elegan Thread Comment "sangat cocok anda buat pada halaman blog kesayangan anda agar lebih menarik dan terkesan halaman para ahli bloger. Desig Thread Comment ii sudah dilengkapi degan Nontifikasi Life Link atau menonaktifkan secara otomatis LINK yang Hidup dalam istilah blog link spam yang terdapat pada comentar para spammer jadi anda jangan takut semua spammer hilang dari style Comment ini.

Di poskan oleh : Unknown | Dipublish pada : 6:14 PM | 12 komentar
Read More

Tuesday, July 16, 2013

Widget top komentator valid html5

Menampilkan Komentar teratas dari para pengunjung blog dapat dikatakan sebagai daya tarik tersendiri buat seseorang, Komentar teratas atau yang biasa disebut dengan TOP COMMENT dapat di pasang pada halaman blog kita untuk lebih menghidupkan suasana halaman blog kita. Pada postingan kali ini saya melihat diberbagai halaman blog sering menampilkan widget comentar , baik itu Top komentar ataupun Counter Koentar. kali ini sayaka membagikan script untuk menampilkan top Komentar pada blog yang memang pada dasarnya harus Valid HTML 5 dan CSS 3. Script ini dapat anda pasang pada template Responsive dan HTML 5.Oke langsung saja menuju TKP , simak penjelasan pemasangan widget ini.

Cara membuat top komentar valid html5

Install Program CSS


  • Login ke dashboard anda
  • Masuk ke "TEMPLATE" lalu klik " Edit HTML "
  • Cari code ]]></b:skin> 
  • Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi

.top-commenter-line img {
border-radius: 100px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
border: solid #111 2px;
}
.top-commenter-line {margin: 3px 0;}
.top-commenter-line .profile-name-link {padding-left:0;}
.top-commenter-avatar {vertical-align:middle;}


Install Program Tag HTML


Untuk memanggil widget top comentar tersebut silahkan simak penjelasan dibawah ini ;
  • Anda masih berada dihalaman dasbor lalu anda menuju "TATA LETAK "
  • Silahkan klik "Add Gadget "( Tambahkan gadget )
  • Pilih " HTML / JavaScript "
  • Copy Code HTML dibawah ini, paste pada gadget anda.

<script type="text/javascript">
var maxTopCommenters = 5; // Total komentar teratas
var minComments = 1; //Total minimal komentar terbawah
var numDays = 0; // waktu lamanya komentar
var excludeMe = true; // false , bila komentar anda tidak ingin ditampilkan
var excludeUsers = ["Anonymous", "someotherusertoexclude"]; // Ganti nama yang tidak terdaftar
var maxUserNameLength = 42; // jumlah huruf nama komentator
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
var txtNoTopCommenters = 'No top commentators at this time.';
var txtAnonymous = ''; // untuk mengganti nama yang tidak terdaftar
var sizeAvatar = 30; // Ukuran Gambar
var cropAvatar = true;// false , bila gambar anda tidak ingin di kecilkan
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi79EImZriXmjpq1gArjMiTGK1spkoy5IfAApxpnEAh98AmO7ve5MbSaGg3iUWY1whdpEkue7FgJdwko7KKDdJnkbD651juVt4b39GIXppJ-Lc8U1GRyhfIyN_DsZvJkrlThn_glYOeIUk/"+sizeAvatar+"/avatar_blue_m_96.png"; // Gambar avatar untuk comment anymous
var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar;
var urlMyProfile = ''; // Set Url untuk tampilan avatar profil sendiri
var urlMyAvatar = ''; // biarkan kosong bila anda tidak ingin membuat gambar khusus

if(!Array.indexOf) {
Array.prototype.indexOf=function(obj) {
for(var i=0;i<this.length;i++) if(this[i]==obj) return i;
return -1;
}}
function replaceTopCmtVars(text, item, position)
{
if(!item || !item.author) return text;
var author = item.author;

var authorUri = "";
if(author.uri && author.uri.$t != "")
authorUri = author.uri.$t;

var avaimg = urlAnoAvatar;
var bloggerprofile = "http://www.blogger.com/profile/";
if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
avaimg = author.gd$image.src;
else {
var parseurl = document.createElement('a');
if(authorUri != "") {
parseurl.href = authorUri;
avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
}
}
if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
avaimg = urlMyAvatar;
if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
avaimg = urlNoAvatar;
var newsize="s"+sizeAvatar;
avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
if(cropAvatar) newsize+="-c";
avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");

var authorName = author.name.$t;
if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
authorName = txtAnonymous;
var imgcode = '<img class="top-commenter-avatar" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';

if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)
authorName = authorName.substr(0, maxUserNameLength-3) + "...";
var authorcode = authorName;
if(authorUri!="") authorcode = '<a class="profile-name-link" href="'+authorUri+'">'+authorcode+'</a>';

text = text.replace('[user]', authorcode);
text = text.replace('[image]', imgcode);
text = text.replace('[#]', position);
text = text.replace('[count]', item.count);
return text;
}
var topcommenters = {};
var ndxbase = 1;
function showTopCommenters(json) {
var one_day=1000*60*60*24;
var today = new Date();

if(urlMyProfile == "") {
var elements = document.getElementsByTagName("*");
var expr = /(^| )profile-link( |$)/;
for(var i=0 ; i<elements.length ; i++)
if(expr.test(elements[i].className)) {
urlMyProfile = elements[i].href;
break; }}
for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
var entry = json.feed.entry[i];
if(numDays > 0) {
var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601
var cmtDate = new Date(datePart[0],datePart[1]-1,
datePart[2],datePart[3],datePart[4],datePart[5]);
//Kalkulasi waktu comment
var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));
if(days > numDays) break;
}
var authorUri = "";
if(entry.author[0].uri && entry.author[0].uri.$t != "")
authorUri = entry.author[0].uri.$t;

if(excludeMe && authorUri != "" && authorUri == urlMyProfile)
continue;
var authorName = entry.author[0].name.$t;
if(excludeUsers.indexOf(authorName) != -1)
continue;

var hash=entry.author[0].name.$t + "-" + authorUri;
if(topcommenters[hash])
topcommenters[hash].count++;
else {
var commenter = new Object();
commenter.author = entry.author[0];
commenter.count = 1;
topcommenters[hash] = commenter;
}
}
if(json.feed.entry.length == 200) {
ndxbase += 200;
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&amp;max-results=200&amp;start-index='+ndxbase+'&amp;alt=json-in-script&amp;callback=showTopCommenters"></'+'script>');
return;
}
// Menmpilkan fungsi array top koment
var tuplear = [];
for(var key in topcommenters) tuplear.push([key, topcommenters[key]]);
tuplear.sort(function(a, b) {
if(b[1].count-a[1].count)
return b[1].count-a[1].count;
return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1;
});
// list untuk top komment
var realcount = 0;
for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {
var item = tuplear[i][1];
if(item.count < minComments)
break;
document.write('<di'+'v class="top-commenter-line">');
document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
document.write('</d'+'iv>');
realcount++;}
if(!realcount)
document.write(txtNoTopCommenters);}
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&amp;max-results=200&amp;alt=json-in-script&amp;callback=showTopCommenters"></'+'script>');
</script>



Kesimpulan

Pemasangan widget Top Comment ini pada halaman blog, selain untuk memperindah tampilan dan keunikan halaman blog dapat juga membantu para pengunjung untuk melihat siap saja yang menjadi Komentator tertinggi pada halaman blog tersebut.

Di poskan oleh : Unknown | Dipublish pada : 2:06 PM | 6 komentar
Read More

Monday, July 15, 2013

Cara membuat icon author comment

Comment author adalah pesan komentar yang dipublish oleh pemilik akun situs web atau blog. Tampilan komentar dari sang penulis atau admin biasanya berbeda dengan para pengunjung atau komentator, sebab bila dalam suatu situs banyak yang komentar para pengunjung atau komentar lainnya dapat membedakan dengan cepat mana komentar dari author dan mana dari para pengunjung. Memang trik ini sudah tergolong lama dalam dunia bloging tapi menurut pemikiran saya tidak ada salahnya untuk mengingatkan kembali ataupun untuk membuat suatu koleksi author comment pada ingatan kita.


Untuk memasang icon author comment ini tergolong mudah, karena kita hanya memasangnya dengan code CSS sebagai pemanggil code image icon author commentnya. Oke daripada makin bosan bacanya langsung saja menuju TKP dan simak penjelasan dibawah ini :


Installasi Code CSS


  1. Seperti biasa login to blog
  2. Pilih " Template "
  3. Kemudian Klik " Edit HTML "
  4. Setelah itu cari code ]]></b:skin> atau pun </style>, setelah ketemu silahkan copy code CSS dibawah ini dan pastekan didalam ataupun diatas code ]]></b:skin> atau pun </style>. kalo lebih bagusnya silahkan pastekan code dibawah ini dekat dengan atau bersamaan dengan code CSS (comments ) agar lebih mudah suatu saat anda untuk mengeditnya. Setelah selesi silahkan save template anda dan lihat hasilnya. Untuk DEMO anda bisa melihat Icon Author Comment pada komentar blog ini.

.comments .comments-content .icon.blog-author{position:absolute;top:-8px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBBnwEis9JgMPeLLVUqGYsF2S1AIswsetaMjl80UkC8PvprdKz9LMRn-yEtXMKu1SfGZL8YY87YNoUNpsEGvoIRaarorvE-yRajnJZnTUD8UOyYh-ejHHiAh8EUoLfSPn0P9bFJun3vek/s1600/Merah-autor.png);width:56px;height:56px}

Bila anda ingin lebih kreative silahkan anda pilih gambar dibawah ini sesuai dengan tampilan blog anda. Code CSS dibawah ini gantikan dengan code CSS yang berwarna biru diatas, Code yang anda copy sesuai dengan gambar yang tertera pada postingan ini. Bila settingan letaknya kurang memadai / pas silahkan setting besar kecilnya angka pada code warna hijau diatas.


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3BuWdJwWoJtyX8FOvSuRFatcHgb5Blf5SAxtFkyvIptXtt7vWmMSrqnwbD2MQgeVrW2lhMbY77Ii-L57qGINL_9EhdcgDdKMIbKA21WSdtyOU2Jy0SlOvF8vk0kI3olcNJmLKZfLrUV0/s1600/autor-biru.png
Author 1
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiivJgDRdUN1dyvhMRQBYV1ORZvN9qNrQgiQSlvV9Xt1tZv1MMRJNiMj2fvmoq-qAk6ckj5Ebne2qwCGpEWwQATVtTPFufTYW0nTJSXLwPDtkTLDKED77qZKqPJesaYaOOshxatEsXzpEw/s1600/autor-black.png
author 2
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiRoXbsQ_awsJOWDrg8KKuKlGKn6wLncE8Asw95KDsYrVEjUYU6dvJxz0GxGnQuNxMyjV3KPR5leMmhADncvzlfLGpy4SSZR17PHR2i6qnE422MAuiTeXEAZnPmWdiLpiYtvjVrwC8y-E/s1600/autor-hijau.png
author 3
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn4j18eSMUb1rLfWL3YXMfgEu1rfSJMx4SqhfwhBQOf1m8p3W5d3PyTm9KMuQrwRleoN0oAE8y3FVgeLznqfMu6pNY9njFBctb7AokeUmK72YU-8wCEMeR6MafBZFu1la8sG4z5hA4o1M/s1600/autor-kuning.png
author 4
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi91sCLgm0UD6S-32nfQBcRMGeXjWALlgdWYtMjX-ehqnTOlXfdvFXuY2FEU6MdE11DhKtrUBggdKHEOceF2u5H2BUalbo_757Dgx4eHB49Hsu2AkY37DPp_Vn8VCR9-EJkhK67VbrlArs/s1600/authorpink.png
author 5



Kesimpulan

Perbedaan author comment dengan para komentator dengan menambahkan icon gambar User Author pada postingan kali ini, akan mempermudah para komentator melihat Komentar author pada suatu halaman blog form Comment.

Di poskan oleh : Unknown | Dipublish pada : 11:13 AM | 42 komentar
Read More

Monday, July 8, 2013

Cara membuat pesan komentar di blogspot

Pesan komentar sangat diperlukan sebagai peraturan kepada pengunjung untuk lebih menjaga tatakrama memberikan suatu komentar pada artikel yang akan dikomentari atau istilah dalam bloging adalah komentar SPAM. Bagi pengguna blog yang masih baru dalam dunia bloging hal ini dapat dengan mudah dilakukan tanpa mengedit html template blog yang berlebihan. Untuk mewujudkan misi ini anda harus lebih dulu membuat pesan untuk komentar anda. Silahkan simak tutorial dibawah ini :

Tutorial


  1. Login to Blog
  2. Pilih " Setelan " kemudian klik " Pos dan Komentar "
  3. Pada halaman tersebut lihat tulisan " Pesan Formulir Komentar " dan silahkan tambahkan pesan anda. setelah selesai klik " simpan setelan " yang ada disebelah kanan atas. Sekarang pesan komentar halaman anda sudah tersedia kini saatnya kita untuk memodifkasinya atau memberikan sentuhan CSS yang tentunya Valid HTML5 & CSS 3 agar lebih sensasional..
  4. Sekarang kita masuk ke template ,Silahkan pilih " Template " kemudian klik " Edit HTML " lalu cari code <p><data:blogCommentMessage/></p>. Setelah ketemu silahkan anda ganti dengan code
    <div id='pesan-comment'><data:blogCommentMessage/></div>
    Note : Biasanya code tersebut ada 4 code yang sama pada template blogspot, silahkan ganti keempat code tersebut dengan code diatas.
  5. Setelah anda ganti codenya silahkan cari code ]]></b:skin>
  6. Setelah ketemu tanbahkan code yang ada dibawah ini tepat keatas code ]]></b:skin> yang anda cari tadi, lalu simpan template anda. Lihat pesan komentar dibawah postingan ini sebagai DEMOnya.

#pesan-comment {
position : relative;
background : #E4E6E7;
width : 95%;
padding : 10px;
font : normal normal 12px trebuchet ms;
text-align : justify;
border : #5F676B solid 3px;
margin : 0 10px 10px 3px;
margin-top : 10px;
line-height : 1.3em;
}
#pesan-comment::after, #pesan-comment::before {
top : 100%;
border : transparent solid;
content : " ";
height : 0;
width : 0;
position : absolute;
}
#pesan-comment::before {
border-top-color : #5F676B;
border-width : 15px;
left : 10%;
margin-left : -36px;
}
#pesan-comment::after {
border-top-color : #E4E6E7;
border-width : 9px;
left : 10%;
margin-left : -30px;
}

Note : Silahkan anda design ulang warnanya agar lebih serasi dengan warna template anda. Bila ada penjelasan diatas yang kurang begitu jelas buat anda silahkan share dengan berkomentar di form komentar dibawah.
Bila anda mengalami masalah pada pemasangan pesan komentar ini silahkan kunjungi link dibawah ini untuk melihat solusinya :
http://rivai-silaban.blogspot.com/2013/07/solusi-kesalahan-membuat-pesan-komentar.html
Di poskan oleh : Unknown | Dipublish pada : 1:50 PM | 15 komentar
Read More

Sunday, July 7, 2013

Cara mempercantik gambar komentar blog

Avatar comment adalah gambar icon dari setiap pengunjung atau user yang memberikan pesan komentar kepada suatu halaman postingan blog. Dalam tehnik bloging komentar dari para pengunjung sangat kita butuhkan dimana hal tersebut selain membuat halaman blog kita nampak hidup, dapat juga meningkatkan nilai tersendiri halaman blog. Dalam postingan kali ini saya akan memberikan suatu trik cara mengganti bentuk devault avatar comment agar kelihatan lebih menarik. Id dari trik kali ini saya ambil dari model Avatar Google Plus yang memang saya rasa menarik. Dalam trik blog kali ini saya merubah bentuk devault avatar comment menjadi bulat dengan sistem CSS.


  1. Login to Blog
  2. Klik " Template " lalu pilih " Edit HTML "
  3. Cari code .avatar-image-container img{......} Letak code tersebut biasanya dibagian <b:skin> atau <style>
  4. Setelah dapat code diatas, sekarang anda hanya tinggal menambahkan code ini : border:#fff solid 2px;border-radius:30px; sehingga akan seperti code dibawah ini.

.avatar-image-container img{max-width:38px;border:#fff solid 2px;border-radius:30px;}

Note : Bila code yang ada diatas tidak ada pada template blog anda silahkan cari code [ avatar img ] kemudian tambahkan code berwarna biru diatas. Silahkan berikan komentar anda dan lihat hasilnya untuk DEMO pada blog ini.

Di poskan oleh : Unknown | Dipublish pada : 11:34 AM | 2 komentar
Read More

Thursday, June 13, 2013

Cara membuat pesan komentar di blog

Form komentar dalam sebuah halaman sangat kita perlukan dimana para pengunjung dapat berkonsultasi terhadap sebuah artikel yang telah kita posting di halaman blog kita. Aktivnya suatu share melalui form komentar akan semakin bagus buat blog kita untuk meningkatkan PR ( Pageranking ) halaman situs kita dimata mesin pencari, seperti google. Sebagai pengguna jasa online hal ini harus menjadi pertimbangan yang utama diantara pertimbangan yangpaling utama lainnya. Oleh karena pentingnya hal ini, dalam berkomentar, pengunjung blog kita akan mengetahui tata cara berkomentar pada blog kita sehingga kita memerlukan suatu pesan singkat yang dituliskan dalam sebuah halaman blog yang menjadi acuan peraturan dari suatu komentar yang akan diberikan oleh para pengunjung. Yang biasa saya sebut dengan Pesan Komentar.

fungsi

 

Pesan Komentar ini berfungsi untuk memberikan suatu pesan aturan dari tata cara menyampaikan sebuah komentar untuk sebuah artikel yang telah kita posting pada halaman blog kita. Sebagai fungsi suatu pesan aturan, kita akan menuliskan suatu pesan yang memang benar benar ringkas jelas dan tidak bertele tele. Sebuah pesan yang disampaikan buat para pengunjung yang akan menjadi sebuah aturan dalam berkomentar harus dituliskan dengan serba sopan santun agar para pengunjung kita tidak merasa tersinggung, sebab suatu kunjungan sangat berharga buat suatu halaman blog kita. Dalam postingan saya kali ini, sebuah pesan dalam halaman blog akan kita buat, dan akan saya uraikan melalui tag tag html agar dapat kita sisipkan dalam tubuh tag HTML blog kita. Saya beharap sahabat sahabat bloger saya sudah memahami kegunaan dari Pesan Komentar yang akan kita buat pada halaman blog kita. 

Lihat screen shoot gambar pesan komentar yang akan kita buat dibawah ini. 

gambar demo pesan komentar

    Fitur 

     

  • Gambar Leave comment
  • Text Pesan Komentar
  • Tombol Join to Blog
  • Gift image

Install Program CSS 

 

  • Login ke dashboard anda
  • Masuk ke "TEMPLATE" lalu klik " Edit HTML "
  • Cari code ]]></b:skin> 
  • Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi
.Pesan_Komentar{
background:#FFF;
width:590px;
padding-top:2px;
padding-bottom:5px;
padding-left:10px;
padding-right:10px;
border: 1px solid rgb(9, 149, 223);
border-radius: 6px 6px 6px 6px;
box-shadow: 2px 4px 4px rgb(204, 204, 204);
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
border-color: #666666;
height: 200px;
}

 

Install Program Tag HTML 

 

  • Login ke dashboard anda
  • Masuk ke "Template"
  • lalu klik "Edit HTML"
  • Cari code <div class='comment-form'> ( tekan Ctrl+F untuk mempercepat )
  • Copas Code HTML dibawah ini, paste di atas code
    <div class='comment-form'>
<h4 id='comment-post-message'>
<img alt="leave comment" height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfXLRQB4UDewGNen7F02RLxiU5eOBOxrZ5ou-N2lBeqkyNbZ9V3ViHki1p0E3HVUkphvwqhpxoEwilBDEkUCUjPKoSN59VbJgwNBJUQEachZ6JdPuONu-a2i1q9GgpOfph3mOP4DcSjyg/s1600/leave-a-comment.jpg' width='300' style="margin-bottom:-20px;" />
</h4>
<div class='Pesan_Komentar'>
<p>
<span id='result_box' lang='id'>
<b>Semua umpan balik saya hargai dan saya akan membalas pertanyaan yang menyangkut artikel di Blog ini sesegera mungkin. </b>
<br/><br/>
1. Komentar SPAM akan dihapus segera setelah saya review
<br/>
2. Pastikan untuk klik &quot;Berlangganan Lewat Email&quot; untuk membangun kreatifitas blog ini
<br/>
3. Jika Anda memiliki masalah cek dulu komentar, mungkin Anda akan menemukan solusi di sana.
<br/>
4. Jangan Tambah Link ke tubuh komentar Anda karena saya memakai system
<b> link exchange </b>
</span><span lang='id'><br/>
</span>5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
<br/></p>
<div style='margin-top:1px; margin-left: 0px; font-style:italic'>
<p align="right"> Bila anda senang dengan artikel ini silahkan <a href='http://www.blogger.com/follow-blog.g?blogID=5055362939739660258' target='_blank' rel="nofollow" title="Join to Blog">Join To Blog </a> atau berlangganan geratis Artikel dari blog ini. Pergunakan vasilitas diatas untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui komentar atau share sesuai dengan artikel diatas. </p>
</div>
<div style='margin-top:-15px;'>
<img alt='Me' align='left' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRBuzx4V15pfjctlyc1ND6NWoMU_vshUyTnLACyK3t9-8_fGHxQ5bGkJlhjHMbfvLt4jKid_55dYqNsCogCOKUG1jLwZEiEuczjAVs8NdDKkRcz5T7ejrY99KXpmGaqgUIPkPBPK6uKZc/s1600/masalah.gif' style='padding: 10px 10px 0px 0px;margin: -40px 10px 0px 0px;' width='80'/></div>
</div>

 

Keterangan Code

 

  • Code tulisan warna merah ganti URL sesuai dengan ID blog anda
  • Klik disini http://rivai-silaban.blogspot.com/2013/06/cara-mengetahui-blog-id-dan-post-id.html
  • Ukuran lebar adalah 590px ( edit CSS untuk merubah ukurannya )
  • Sesuaikan semua tulisannya sesuai dengan peraturan blog anda.
Di poskan oleh : Unknown | Dipublish pada : 3:05 PM | 144 komentar
Read More

Saturday, May 18, 2013

Cara menonaktifkan link dikomentar

Cara menonaktifkan link dikomentar
Sobat bloger…!! Mungkin sudah pernah mengalamisuatu hal dimana para pengunjung blog kita berkomentar dengan meninggalkan linkaktif bersamaan dengan pesannya, hehehe mungkin sedikit kesal ya. Tapi… Yah memangbagi sebagian orang itu wajar wajar saja, tapi buat yang lain hal itu sudahtermasuk keterlaluan. Sebagai bloger sejati ada baiknya kita selalu menghargaiorang lain walaupun memang pada dasarnya kita tidak pernah bertemu langsung,tapi setidaknya ada naiknya etika itu tetap berjalan sesuai dengan koridornya. Alampostingan saya kali ini saya ambil dari pengalaman saya waktu dulu dan padakesempatan kali ini saya akan membagi trik dan script nya kepada sobat bloger.Oke terlalu banyak ngomongpun tanpa perbuatan salah …. !!   hehehe langsung sajamenuju TKP.
  • Seperti biasa login to BLOGER
    pilih “TEMPLATE” lalu klik “EDIT HTML
    Sekarang anda sudah berada dilokasi pengeditan tag xHTML blog anda.

“Mengganti link aktif komentar dengan link andasendiri”

Bila ada satu komentar yang mengandung link aktif secara otomatis elemnt linktersebut akan tergantikan sesuai dengan link URL yang kita atur di script.

Cari kode </head>
Kemudian copy script dibawah dan pastekan Script di bawah ini diatas coe</head>.


<scriptsrc='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>
<!—nonaktif link dengan ganti URL-->
<script type='text/javascript'>
jQuery(document).ready(function(){
 jQuery("#comments pa").attr("href", "URL BLOG ANDA");});</script>



“Mengganti link  dengan pesanperingatan anda sendiri”

Bila ada comentar yang mengandung link aktif secara otomatis link tersebut akanberganti dengan sebuah pesan peringatan yang sudah kita atur.
Cari kode </head>
Kemudian copy script dibawah dan pastekan Script di bawah ini diatas coe </head>.
<scriptsrc='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>
<!—nonaktif link dengan pesan-->
<script type='text/javascript'>
jQuery(document).ready(function(){
 jQuery("#comments p").find("a").replaceWith("<spanstyle="color:#FF0000"><blink>Warning</blink></span><spanstyle=" color:#000"> : error link submit</span>");});</script>




“Menghapus link aktif komentar dengan JQUERY”

Bila ada comentar yang mengandung link aktif secara otomatis link tersebut akanhilang ( dihapus ) dan tidak ditampilkan karena setiap fungsi (‘a’) yang ada diruang lingkup tag HTML  $(‘#comments p’)akan terhapus.
Cari kode </head>
Kemudian copy script dibawah dan pastekan Script di bawah ini diatas coe </head>.
   <scriptsrc='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'type='text/javascript'></script>
   <!—menghapus link aktif-->
 <script type='text/javascript'>
   $(function() { $('#commentsp').find('a').remove(); }); </script>




“Non aktif link aktif komentar dengan JQUERY”

Bila ada comentar yang mengandung link aktif secara otomatis link tersebut akanhilang atau dinon aktifkan oleh fungsi $('#commentsp').find('a').contents().unwrap();.
Cari kode </head>
Kemudian copy script dibawah dan pastekan Script di bawah ini diatas coe </head>.
   <scriptsrc='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'type='text/javascript'></script>
   <!—nonaktif link aktif komentar dengan JQUERY-->
<script type='text/javascript'>  //<![CDATA[$(function(){
 $('#commentsp').find('a').contents().unwrap();});
//]]></script>


   
 “Nonaktifkan link aktif komentar dengan CSS”

Bila ada comentar yang mengandung link aktif secara otomatis link tersebut akandinonaktifkan, karena pungsi CSS sedang dipasang di blog.

 Cari kode ]]></b:skin> (GunaanCtrl + F untuk mempermudah pencarian)
 Copy script dibawah   ini dan pastekan di atas kode]]></b:skin>

    /*____ mematikanlink aktif dengan css____*/
 #comments p a{display:none!important}

  
   NB : JikaJQUERY  anda di bawah Versi 1.8.3 makaganti  dengan 1.8.3 atau bila sudah ada,  

<scriptsrc='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>
Script yang diatas  sebaiknya jangandicopy lagi karena akan memperberat loading blog
Di poskan oleh : Unknown | Dipublish pada : 2:40 PM | 6 komentar
Read More