Sunday, June 21, 2015

Cara Mudah Mempercantik Gambar Komentar di Blog


A
vatar 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.
Diposkan oleh di No comments:

Cara Mudah Membuat Counter Comment di Blog


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 dariCounter 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.
Diposkan oleh di No comments:

Solusi Atasi Kesalahan Membuat Pesan Komentar di Blog


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.

SolusiBila 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>

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

    6. <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>

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

Keterangan Code
  • Tulisan kode warna MERAH atas sampai kode warnaMERAH 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 warnaBIRU. Biasanya kode ini berada pada tag html blog
Diposkan oleh di No comments:

Cara Mudah 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/AVvXsEhPE57yy5kTRoS8SclcOVq0VhKgpZuwxCEYjpWolTE0_FOQKGo1ff26b036cl3pdgIQ393hpfLcp_hW4kasmjRZd60LLG3fJWFC1cs2ihGdQNoBAuprWc_BJ1OLbwCBuxmqi7I4iF-6O1A/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.
Diposkan oleh di No comments:

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. 
Diposkan oleh di No comments:

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 ***/

Diposkan oleh di No comments:

Cara Mudah Membuat Tanda Icon Author Comment Profesional di Blog

C
omment 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 commentpada 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 Commentpada 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/AVvXsEjognlLlO4F_7-I7DLloWsoLQWDCa2AS6WPAuPbV1X5No8T-uKhQucAr2TUNECWeUSi7GRp0LfE7b2W8SmQdG3BEF5nYqA8gSbpaXxhuinnpnbaZ5US2SP19sP01vrX9IPJ0bJwofmfJzk/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/AVvXsEjUZyGaAH76Xn4WJ3rs49pIDO8U7KM7mofrvZFmz7fE5Y_EYvQfSlJ8_WxHBz4iO900PGQaI7qMlo-P1QbIkVujHH6S0WJFZXXHj4zEreMh7zlNuREDoi1gIguRugbE9K92YfoXfpLt6bA/s1600/autor-biru.png
Author 1
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOQUCuNmwEDxUotMmDpxdXub78AxKVB3SiOhhs8L7wI3kNwQ9NRCg9BBAHbYnxZc4FwR3fBckpNzvmFMZlUkpLDTKCV17-waWT7sLuq81CJBssO7yWq4qp3XFktXnML4AY4f9xwB_TPUI/s1600/autor-black.png
author 2
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjekNMpKV8BNRCMI0ABtLTH_3-D2u_yMB4lA8UC1ReFE-AAw2lKhxfFnTsH6JWk7XeZh3Xk2Na1yzw9xJKIcLQl1S9Wxzk3RB-jPba_cZIwBB0_mAy6d31zzG8Nlr1QvSa5Tp70sP5jr5s/s1600/autor-hijau.png
author 3
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm55qSokonfsTunHYAMUOy8I5zLmuIRj1WG9XYCJwFgC33a7xWjZR3bqyXuFaSalFPAhMHdpW4Qh8iJi4sRfoA4IXr6A-ttLxW1Sk4M0D-m8B8yY0IFiW1OkOm90uEJlDbWPmpGvLSgOM/s1600/autor-kuning.png
author 4
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiixjYCEaTZEsDXb2G_UMG5JDy0F0bIEt9CLQflChjIjesI-Bmpjnkh9UAE47Qq455hRQTNDTb0oGuohUuP18q4_ZH0RXlc0vNeiF6vuzNqJdyxsb1XJi9-cxY-6JzBKOtcJFDYzMv5b7g/s1600/authorpink.png
author 5
Diposkan oleh di No comments:

Pasang Iklan di Blog Virgozta



Untuk cara pemasangan iklan di blog Virgozta ini cukup mudah bagi anda yang ingin mempromosikan produk penjualan atau website dan sebagainya, cukup hanya membayar uang sebesar Rp. 10.000,- / bulan anda dapat menikmati iklan dan kunjungan dari iklan yang ada di blog Virgozta...

Bagi yang minat silahkan hubungi Call Contact Kami :

No. HP : 089698975848
PIN BB : 5A5AB49E
Diposkan oleh di No comments:

Saturday, June 20, 2015

Kumpulan Tema Anime Keren untuk Windows 7 Gratis 2015

hallo sob.. heemm ketemu lagi dengan saya , kali ini saya ingin berbagi theme windows 7 anime yang pasti keren dan bikin lebih menarik , ini saya dapatkan dari blognya Ewin Hayon, yah mungkin bermanfaat bagi sobat yang lagi mampir di blog saya ini.






























Gimana ?? Tertarik download aja disini :
  1. Accel World
  2. Angel Beats
  3. Beelzebub
  4. Bleach V2
  5. Bleach V3
  6. Dead Master Win7
  7. Fate Stay Night Saber V1
  8. Hyouka win7
  9. Kagamine Rin & Len
  10. Katekyo Hitman Reborn v1
  11. Kore wa Zombie desu ka
  12. Naruto & Bleach
  13. Nyaroko win7   
Note untuk thema 1-13 diatas menggunakan password di bawah ini:
[Password]

    1. Ao No Exorcist
    2. Akiyama Mio K-ON 
    3. Akashi Seijuuro KnB 
    Note : Untuk thme 1-3 diatas menggunakan [Password : Drakenz]

    1. Detective Conan Shinichi Kudo and Ran Mouri [Password: LUTFIKUN29]
    2. Detective Conan v1 [Password: IrsyadaFaruki]
      Diposkan oleh di No comments:

      Download Cool Edit Pro 2 Full Crack Gratis untuk All Windows

      Download Cool Edit Pro 2  
      hai sobat blogger kali ini saya mau berbagi software Download Cool Edit Pro 2 full crack gratis, pasti udah tau kan tentang software ini. Cool Edit Pro adalah digital sound editor untuk komputer dengan sistem windows. Software ini bisa digunakan untuk merekam dan memodifikasi file dengan format WAV. Dan masih banyak tools lain yang bisa anda temukan didalam Cool Edit Pro ini.

      Semua fungsi yang dibutuhkan dalam membuat sebuah pryek audio ada dalam software ini, mulai dari proses pengonsepan sampai penyelesaian, jadi anda tidak memerlukan software-software pendukung yang lain atau “plug-ins” untuk menyelesaikan sebuah proyek. Karena plug-ins telah tersupport di dalam software ini, sehingga anda dapat menggunakan Cool Edit Pro dengan mudah.
      Cool Edit Pro bisa anda gunakan untuk merekam sebuah suara dan menggabungkannya dengan 128 stereo track menggunakan Windows sound card normal. Jika anda memiliki lebih dari satu sound card, tidak menjadi sebuah masalah karena Cool Edit Pro support terhadap lebih dari satu sound card.Cool Edit Pro diproduksi oleh Syntrillium Software Corporation, dengan ukuran 21,7 MB, baik digunakan pada Windows 98/Me/2000/XP/Vista ke atas.

      untuk mendownload silahkan pakai link di bawah ini

      mudah mudahan bermanfaat yah..
      Diposkan oleh di No comments:
      Subscribe to: Posts (Atom)