Cara membuat tampilan komentar admin blog berbeda dari pengunjung

Berbeda tentu hal yang di sukai oleh beberapa orang ya mungkin sobat termasuk orang tersebut, seperti artikel yang satu ini yaitu membuat tampilan komentar admin atau author blog berbeda dari pengunjungnya, berkomentar tentu merupakan aktivitas blogging yang sudah biasa di lakukan di mana ada pengunjung yang berkomentar pasti setidaknya akan memerlukan tanggapan dari pemilik blog, nah untuk membuat komentar pemilik blog tersebut mudah di ketahui pengunjung maka harus ada sedikit tampilan yang agak berbeda dari biasanya tidak sama seperti komentar para pengunjung dan untuk itu saya akan berbagi tips dan trik blog sesuai dengan topik di atas yaitu membuat tampilan komentar admin blog berbeda dari pengunjung. oke langsung saja ya kita bahas cara penerapannya jika sobat tertarik silahka ikuti langkah-langkah di bawah ini

1.      masuk ke akun blogger sobat pilih tab design → edit HTML

2.      jangan lupa centang atau ceklis expand template widget

3.      carilah kode ]]></b:skin> untuk mempermudah pencarian tekan tombol CTRL+F lalu masukan ]]></b:skin> ke kotak pencarian.

4.      setelah itu masukan kode script di bawah ini tepat di atas kode ]]></b:skin> tadi

.comment-body-author { background: #E6E6E6; /* Background Colour */ border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344; margin:0; padding:0 0 0 20px; } 5. di lanjutkan dengan mencari script kode html berikut, dengan Catatan : tidak semua script kode di bawah ini sama persis pada setiap blog, <dl id='comments-block'> <b:loop values='data:post.comments' var='comment'> <dt class='comment-author' expr:id='"comment-" + data:comment.id'> <a expr:name='"comment-" + data:comment.id'/> <b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a> <b:else/> <data:comment.author/> </b:if> said... </dt> <b:if cond='data:comment.author == data:post.author'> <dd class='comment-body-author'> <p><data:comment.body/></p> </dd> <b:else/> <dd class='comment-body'> <b:if cond='data:comment.isDeleted'> <span class='deleted-comment'><data:comment.body/></span> <b:else/> <p><data:comment.body/></p> </b:if> </dd> </b:if> <dd class='comment-footer'> <span class='comment-timestamp'> <a expr:href='"#comment-" + data:comment.id' title='comment permalink'> <data:comment.timestamp/> </a> <b:include data='comment' name='commentDeleteIcon'/> </span> </dd> </b:loop> </dl>

5. untuk kode yang berwarna biru di atas adalah kode yang harus sobat tambahkan di

    template sobat.

6. terakhir tinggal sobat simpan.

Untuk melihat hasilnya silahkan sobat membuat kometar sobat sendiri tentunya dengan masuk ke akun blog sobat sendiri. Sekian tips dan trik blog kali ini semoga bermanfaat dan saya ucapkan terimakasih atas kunjungannya.

Cara mengganti tulisan Older post dengan angka pada blog

Jika sobat seorang blogger yang suka akan kerapihan dan mementingkan nilai estetika pasti peduli pada setiap tampilan blog sobat termasuk tampilan yang mungkin bisa di bilang sepele dan juga hal yang akan saya bahas nanti yaitu tampilan tulisan older post, tampilan ini akan lebih menarik jika sobat menghiasnya, untuk itu kali ini saya mau berbagi tips untuk mengganti tulisan older post pada blog sobat dengan angak-angka yang salah satu manfaatnya pengunjung blog sobat dapat meloncat dari suguhan artikel di page satu ke page 5. ya sudah kita langsung bahas cara penerapanya jika sobat tertarik ingin mencobanya silahkan ikuti langkah berikut ini :

1. masuk ke akun blogger sobat pilih tab design  → edit HTML

2. jangan lupa centang atau ceklis expand template widget

3. carilah kode ]]></b:skin untuk mempermudah pencarian tekan tombol CTRL+F lalu

   masukan ]]></b:skin  ke kotak pencarian.

4. setelah itu masukan kode script di bawah ini tepat di atas kode ]]></b:skin tadi

showpageArea a { text-decoration:underline; } .showpageNum a { text-decoration:none; border: 1px solid #cccccc; margin:0 3px; padding:3px; } .showpageNum a:hover { border: 1px solid #cccccc; background-color:#cccccc; } .showpagePoint { color:#333; text-decoration:none; border: 1px solid #cccccc; background: #cccccc; margin:0 3px; padding:3px; } .showpageOf { text-decoration:none; padding:3px; margin: 0 3px 0 0; } .showpage a { text-decoration:none; border: 1px solid #cccccc; padding:3px; } .showpage a:hover { text-decoration:none; } .showpageNum a:link,.showpage a:link { text-decoration:none; color:#333333; } 5. setelah itu cari kode </body> kemudian simpan kode script dibawah ini tepat di atas </body> <!--Page Navigation Starts--> <b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <script type='text/javascript'> var pageCount=5; var displayPageNum=5; var upPageWord =&#39;Previous&#39;; var downPageWord =&#39;Next&#39;; </script> <script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/> </b:if> </b:if> <!--Page Navigation Ends -->

6. terakhir tinggal sobat simpan.

silahkan sobat lihat hasilnya dan semoga berhasil. sekian artikel kali ini semoga bermanfaat dan terimakasih atas kunjungannya

Cara membuat recent comment dengan avatar yang keren

Recent comment. tentu istilah yang sudah tak asing lagi buat para blogger karena sudah banyak blog-blog yang memasang widget tersebut, sesuai dengan namanya recent comment atau dalam bahasa indonesia komentar terbaru yaitu widget yang khusus menampilkan komentar terakhir (baru) dari pengunjung. ya sudah mendingan kita langsung saja bahas cara penerapanya. untuk sobat yang tertarik silahkan simak langakah berikut :

1. sobat masuk ke akun blogger sobat pilih tab layout

2. pilih add gadget → Html/javascript

3. lalu masukan script kode berikut :

<style type="text/css"> ul.md_recent_comments{list-style:none;margin:0;padding:0;} .md_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;} .md_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;} .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;} .md_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;} .md_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 13px;font-style: italic;line-height: 1.4;}</style><script type="text/javascript">//<![CDATA[ // Recent Comments Settings var numComments = 5, showAvatar = true, avatarSize = 60, roundAvatar = true, characters = 40, showMorelink = true, moreLinktext = "More »", defaultAvatar = "http://www.gravatar.com/avatar/?d=mm", hideCredits = false;//]]></script><script type="text/javascript" src="http://julak-project.googlecode.com/files/recent%20comments%20.js"></script><script type="text/javascript" src="http://www.super-gaptek.com/feeds/comments/default?alt=json&callback=md_recent_comments&max-results=5"></script>

Catatan : silahkan sobat ganti tulisan berwarna merah untuk jumlah komentar yang ingin di tampilkan. Warna biru untuk ukuran panjang lebar gambar avatar.

4. terakhir tinggal di simpan.

silahkan sobat lihat hasilnya dan semoga berhasil. kalau begitu sekian artikel kali ini semoga bermanfaat dan terimakasih atas kunjungannya.

Cara membuat scroolbar pada kotak komentar

Halo sobat apa kabarnya apakah baik ? ya mudah- mudahan baik amiin, ya berterpatan dengan pembahasan tentang topik yang membahas kotak komentar pada blog yang berjudul cara menampilkan kotak komentar di bawah postingan blog yang lalu untuk kali ini saya akan berbagi artikel yang berjudul cara membuat scroolbar pada kotak komentar. Pernahkah artikel di blog sobat menerima banyak komentar yang tentu saja dapat membuat rating artikel dan hal-hal lainya bagus untuk artikel tersebut namun dengan adanya komentar yang banyak dan membutuhkan ruang yang tentu saja membuat para komentator yang berkunjung atau pengunjung yang ingin berkomentar mengalami ketidak nyamanan dikarenakan harus mengerakan roll pada mouse atau menggeser scrollbar pada blog sobat dikarenakan komentar yang membludak terlalu banyak dan panjang juga berpengaruh pada tampilan blog sobat, namun dengan adanya solusi ini dapat membuat masalah seperti di atas teratasi dengan membuat scrollbar pada kotak komentar, kita bahas langsung saja jika ingin menerapkanya mari kita ikuti langkah penerapanya di bawah ini :

           

1.      masuk ke akun blogger sobat pilih tab design → edit HTML

2.      jangan lupa centang atau ceklis expand template widget.

3.      carilah kode #comments-block{ untuk mempermudah pencarian tekan tombol CTRL+F lalu masukan
       #comments-block{ ke kotak pencarian

4.      lalu sobat akan menemukan kode seperti yang ada di bawah ini

#comments-block{border:0px dotted #ccc;width:569px;margin:1.3em 0 1.5em;line-height:1.6em}

5.      selanjutnya ganti kode yang berwarna merah dia atas dengan kode

max-height:300px;border:1px solid #eee;overflow:auto;

      sehingga kodenya nanti akan menjadi seperti ini :

#comments-block{max-height:300px;border:1px solid#eee;overflow:auto;width:569px;margin:1.3em 0 1.5em;line-height:1.6em}

6.      terakhir tinggal di simpan.

Untuk melihat hasilnya silahkan lihat di salah satu artikel sobat, semoga berhasil.

Sekian tips dan trik blog kali ini semoga bermanfaat dan membantu sobat dan tak lupa saya ucapkan terimakasih atas kunjungannya.

Cara membuat energy saving mode pada blog

Menghemat energi merupakan salah satu hal positif yang baik bagi kehidupan dan menghemat adalah cara yang baik untuk kita biasakan dan terapakan pada kehihupan sehari-hari, ya sesuai dengan pembahasan di atas kali ini saya akan berbagi tips dan trik blog yaitu cara menerapkan penghematan energi pada blog, jadi ketika ada yang berkunjung ke blog sobat dan mendiamkan layar monitornya beberapa saat maka tampilan saving mode ini akan mucul. Oke kalau begitu kita bahas sajacara penerapanya. Jika kamu tertarik ingin mencobanya silahkan ikuti langkah-langkah berikut ini :

1.      masuk ke akun blogger sobat pilih tab design  → edit HTML

2.      jangan lupa centang atau ceklis expand template widget

3.      carilah kode </head> untuk mempermudah pencarian tekan tombol CTRL+F lalu

      masukan </head>  ke kotak pencarian

4.   setelah itu masukan kode script di bawah ini tepat di atas kode </head> tadi.

<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'/>

5.       lalu simpan. Dan dilanjutkan ke tahap berikutnya

6.    sobat masuk ke tampilan menu dashboard sobat lalu pilih tab layout.
7.    pilih add gadget → Html/javascript.

8.    lalu masukan kode di bawah ini :

<script language="javascript" type="text/javascript" src="http://www.onlineleaf.com/savetheenvironment.js?time=120"></script>

Catatan : untuk kode yang berwarna merah silahkan sobat sesuaikan dengan keinginan sobat untuk mengatur berapa lamanya tampilan energy saving mode akan muncul.

  9. terakhir tinggal di simpan.

Semoga berhasil ya sobat. Sekian artikel kali ini semoga bermanfaat dan saya ucapkan terimakasih banyak atas kunjungan sobat.