Beberapa Tips Agar Template Blog Kamu Valid HTML5

Beberapa Tips Agar Template Blog Kamu Valid HTML5

Cara membuat template blog valid Html5. Dari beberapa template Blog yang kebanyakan beredar diluar sana mempunyai struktur HTML yang tidak valid, begitu juga dengan template bawaan Blogger. Namun untuk memperbaikinya sehingga menjadi valid dan paling tidak mengurangi error. Ada beberapa cara yang dapat anda tempuh untuk mengurangi error dan warnings sekecil mungkin.

Pertama silahkan cek dahulu untuk memastikan berapa banyak error di template blog kamu. Untuk mengetesnya silahkan cek di Validator w3. Ok sobat berikut adalah tips cara membuat template Blog Valid Html5 atau setidaknya mengurangi error di template blog kamu.

Cara membuat template blog valid Html5

Tips Agar Template Blog Valid HTML5


1. Ganti kode : </html> dengan </HTML>
2. Berikut ini adalah kode-kode HTML yang dapat anda hapus.
<div class='post-share-buttons goog-inline-block'>
3. kode lain...
</div>
<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='&quot;item-control &quot; + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</b:if>
</b:includable>
4. Silahkan cari kode seperti dibawah ini dan silahkan hapus. Kode ini bukan hanya menambah error di template anda. tapi juga menurut saya kode ini tidak penting dibllog. Setiap anda menambahkan widget ditemplate anda sebaiknya kode ini di hapus.
<b:include name='quickedit'/>
5. Hindari Tag <center> karena HTML 5 tidak Support 5. Hapus Widget dibawah ini (Jika ada), :
  • Share Button
  • Penghitung jumlah pengunjung.
6. Perhatikan Hal berikut :
  • Tambahkan tag alt di setiap tag <img> 
  • Hilangkan kode imageanchor pada tag img.
  • Hilangkan kode border pada tag img.
7. Pemasangan random post yang tidak valid HTML 5. Random post memang sangat bermanfaat untuk blog , karena dengan adanya widget random post maka widget ini dapat menampilkan beberapa artikel secara acak yang mungkin saja dapat membuat pengunjung blog tertarik untuk melihat artikel kamu yang lain.

Sebenarnya masih ada kode yang dapat diedit atau di hilangkan. Tapi tergantung template yang digunakan. sekian mengenai cara agar template blog menjadi Valid HTML5 semoga bermanfaat.
Cara Membuat Apk Aplikasi Web Blog Untuk Android

Cara Membuat Apk Aplikasi Web Blog Untuk Android

Cara Membuat Aplikasi Web/Blog Untuk Android - Cara membuat aplikasi Android untuk blog. Saat ini sudah banyak diciptakan tools yang dapat mengerjakan dalam pembuatan aplikasi-aplikasi android tanpa harus menguasai bahasa program android terlebih dahulu. Pada umumnya tools-tools tersebut berbasis interface yang tentunya dapat digunakan oleh seorang pemula sekalipun untuk membuat aplikasi-aplikasi android sesuai dengan keinginanannya sendiri,

Android memiliki prospek yang sangat bagus. Tentunya hal ini sangat tepat bila kita saat ini ingin memulai untuk belajar membuat aplikasi android. Untuk bisa menguasai cara membuat aplikasi android ini sangat mudah karena saat ini telah banyak sumber refferensi tulisan yang mengajarkan kepada kita tentang bagaimana cara membuat aplikasi android yang mudah.

Pada kesempatan ini spezer akan berbagi tutorial bagaimana cara membuat aplikasi android, tapi dikhususkan untuk website atau Blog. Jadi disini untuk kamu yang ingin websitenya memiliki aplikasi sendiri maka dapat mencoba membuatnya.

Cara Membuat Aplikasi / Apk Web Blog Android


1. Silahkan masuk ke situsnya Appsgeyser,
2. Setelah masuk silahkan klik "Create Now",
3. Kemudian Pilih Website atau cari jika di browser anda tampilannya berbeda silahkan cari saja "Website",

Cara Membuat Apk Aplikasi Web Blog Untuk Android

4. Isi kolom yang tersedia. Contohnya seperti pada gambar berikut ini;

Membuat Aplikasi Web/Blog Untuk Android


5. Setelah pengisian data web/blog anda pada AppGeyser selesai, kemudian klik Create App
6. Langkah selanjutnya kolom pengisian data, silahkan isi first name, last name, email, pasword dan kemudian klik Sign Up.
7. Untuk mendownlod file apk nya, kamu tinggal mengklik tombol download maka secara otomatis file apk langsung terdownload.

Membuat Aplikasi Web dan Blog Untuk Android

8. Setelah Aplikasinya di download maka sekarang kamu dapat mencoba menginstalnya di hp android.

PENUTUP

Platform android menjadi piihan untuk anda membuat aplikasi blog atau website. Hal ini disebabkan pengguna android dalam tahun ke tahun mengalami peningkatkan. Artinya banyak orang dalam urusan gadget lebih memilih smartphone atau iPad platform android untuksetiap aktivitas mereka sehari-hari.

Semoga tutorial cara membuat Aplikasi android untuk webstie atau blog - tutorial Cara membuat aplikasi Blog atau website untuk platform Android ini bermanfaat. Selamat mencoba.
Cara Membuat Random Post Tulisan Tanpa Gambar di Blogger

Cara Membuat Random Post Tulisan Tanpa Gambar di Blogger

Cara membuat dan memasang random post berupa tulisan di Blog. Di artikel berikut ini spezer akan membahas tentang widget random post hanya berupa tulisan saja di Blog. Widget random post ada banyak macamnya, seperti widget random post bergerak dan widget randompost dengan gambar di blog yang sudah di bagikan sebelumya.

Nah kembali ke topik bahasan kita mengenai randompost berupa tulisan. Random post berikut ini sangat simple karena hanya berupa tulisan saja. Tapi dengan memakai widget ini setidaknya erornya tidak sebanyak widget random post yang lain.

Cara Membuat Random Post Tulisan Tanpa Gambar di Blogger

Cara membuat dan memasang random Post tulisan di Blogger


Berikut ini adalah kode yang dapat anda letakan di widget HTML template Blog Blogspot Blogger;
<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=10;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&
callback=randomposts" type="text/javascript"></script>

Setelah anda meletakan kodenya di widget Html, silahkan disimpan dan lihat hasilnya.
Cara Membuat Widget Random Post Bergerak di Blogger

Cara Membuat Widget Random Post Bergerak di Blogger

Cara membuat Random post bergerak di Blogspot Blogger. Tutorial kali ini spezer akan membagikan tentang cara membuat dan memasang widget random post di Blog. Widget Random post ini berbeda dengan widget Popular post.

Dengan memasang widget random post maka dapat menampilkan artikel di blog kamu secara acak, artikel lama yang sudah di publish nantinya dapat ditampilkan lagi di widget ini. Sangat berbeda dengan widget popular post hanya menampilkan artikel yang populer saja, widget recent post yang hanya menampilkan artikel terbaru saja.

Cara membuat Random pos bergerak di Blogspot Blogger

Cara Membuat dan Memasang Widget Random Post

Langsung saja sobat berikut tutorialnya!

1. Masuk ke Blogger.
2. Klik menu Tata Letak.
3. Tambahkan Gadget dan pilih HTML/JavaScript.
4. Masukkan kode dibawah ini.
<div style="margin-bottom: 15px;">
<style type="text/css">
#rp_plus_img{height:287px;overflow:hidden;border:solid 0px #585858;padding:1px 5px 14px 1px;background-color:none;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:70px;padding:1px;list-style:none;}
#rp_plus_img a{color:#3366ff;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:5px;font-size:12px;}
#rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal !important;color:#282828;text-align:justify;}
#rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:60px;height:65px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://slide-down-recent.googlecode.com/files/Slide%20Down%20Recent%20Post.js"></script>
<script type="text/javascript">
var speed = 400;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 20;
var numchars = 60;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>
</div>
 Keterangan :
  • Angka yang bewarna merah adalah kecepatan berpindahnya post satu dengan lainnya
  • Angka yang bewarna Biru adalah waktu berhentinya setiap post sebelum berpindah lagi.
  • Angka yang bewarna Hijau adalah jumlah post yang akan ditampilkan di widget random post
  • Semua kode berwarna diatas dapat diganti sesuai dengan keinginan anda
5.  Simpan dan Selesai

Cara mengganti gambar "no image"


komentar di Membuat Widget Random Post Bergerak For Blogger

Mungkin jika sobat ingin mengedit langsung file java script yang disimpan di hosting tempat upload file : <script type="text/javascript" src="http://slide-down-recent.googlecode.com/files/Slide%20Down%20Recent%20Post.js"></script> sobat akan kesulitan karena kode ini telah di encript atau apalah istilahnya itu sehingga file sulit untuk di terjemahkan maka berikut adalah terjemahanan file ini:

<script type="text/javascript">
function rpthumbnt(json) {
document.write('<ul class="rp_plus_img">');
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break
}
}
var thumburl;
try {
thumburl = entry.media$thumbnail.url
} catch(error) {
s = entry.content.$t;
a = s.indexOf("<img");
b = s.indexOf("src=\"", a);
c = s.indexOf("\"", b + 5);
d = s.substr(b + 5, c - b - 5);
if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
thumburl = d
} else thumburl = 'http://lh3.ggpht.com/_xcD4JK_dIjU/SnamIh0KTCI/AAAAAAAADMA/hLjqmEbdtkw/d/noimagethumb.gif'
}
document.write('<li class="news-title clearfix">');
document.write('<a href="http://blog.spezer.net/" target="_blank"><img src="' + thumburl + '"/></a>');
document.write('<a href="' + posturl + '" target ="_top">' + posttitle + '</a><br>');
if ("content" in entry) {
var postcontent = entry.content.$t
} else if ("summary" in entry) {
var postcontent = entry.summary.$t
} else var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
if (postcontent.length < numchars) {
document.write('<span class="news-text">');
document.write(postcontent);
document.write('</span>')
} else {
document.write('<span class="news-text">');
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0, quoteEnd);
document.write(postcontent + '...');
document.write('</span>')
}
document.write('</li>')
}
document.write('</ul>')
}
function rpnewsticker() {
last = $('ul#rp_plus_img li:last').hide().remove();
$('ul#rp_plus_img').prepend(last);
$('ul#rp_plus_img li:first').slideDown("slow")
}
</script>

Nah Sekarang pertanyaan sobat priyo nisme adalah bagaimana mengganti gambarnya dengan gambar yang sobat inginkan?. sekarang lihat kode berwarnah merah diatas, nah itu adalah gambar "no image". silahkan diganti dengan gambar yang sobat inginkan.

Sekarang jika sudah diganti gambarnya, Replace bagian :
<script type="text/javascript" src="http://slide-down-recent.googlecode.com/files/Slide%20Down%20Recent%20Post.js"></script>
dengan kode diatas. Sehingga menjadi seperti kode dibawah ini.

<div style="margin-bottom: 15px;">
<style type="text/css">
#rp_plus_img{height:287px;overflow:hidden;border:solid 0px #585858;padding:1px 5px 14px 1px;background-color:none;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:70px;padding:1px;list-style:none;}
#rp_plus_img a{color:#3366ff;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:5px;font-size:12px;}
#rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal !important;color:#282828;text-align:justify;}
#rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:60px;height:65px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function rpthumbnt(json) {
document.write('<ul class="rp_plus_img">');
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break
}
}
var thumburl;
try {
thumburl = entry.media$thumbnail.url
} catch(error) {
s = entry.content.$t;
a = s.indexOf("<img");
b = s.indexOf("src=\"", a);
c = s.indexOf("\"", b + 5);
d = s.substr(b + 5, c - b - 5);
if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
thumburl = d
} else thumburl = 'http://lh3.ggpht.com/_xcD4JK_dIjU/SnamIh0KTCI/AAAAAAAADMA/hLjqmEbdtkw/d/noimagethumb.gif'
}
document.write('<li class="news-title clearfix">');
document.write('<a href="http://blog.spezer.net/" target="_blank"><img src="' + thumburl + '"/></a>');
document.write('<a href="' + posturl + '" target ="_top">' + posttitle + '</a><br>');
if ("content" in entry) {
var postcontent = entry.content.$t
} else if ("summary" in entry) {
var postcontent = entry.summary.$t
} else var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
if (postcontent.length < numchars) {
document.write('<span class="news-text">');
document.write(postcontent);
document.write('</span>')
} else {
document.write('<span class="news-text">');
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0, quoteEnd);
document.write(postcontent + '...');
document.write('</span>')
}
document.write('</li>')
}
document.write('</ul>')
}
function rpnewsticker() {
last = $('ul#rp_plus_img li:last').hide().remove();
$('ul#rp_plus_img').prepend(last);
$('ul#rp_plus_img li:first').slideDown("slow")
}
</script>
<script type="text/javascript">
var speed = 400;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 20;
var numchars = 60;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>
</div>

Bagian warna hijau adalah gambarnya. Nah sekarang tinggal masukan widgetnya ke mode HTML di blog deh.

Bagaimana sob, mudah bukan? semoga tutorial cara memasang widget randompost bergerak diatas bermanfaat, selamat mencoba.
Membuat Random Post Untuk Percantik Tampilan Blog Kamu

Membuat Random Post Untuk Percantik Tampilan Blog Kamu

Cara Membuat Random Post. Anda pasti tahukan mengenai random post? random post ini dapat menampilkan beberapa artikel secara acak dari blog kamu. Fungsinya sederhana saja yaitu agar pengunjung blog tertarik untuk melihat artikel blog yang lainnya.

Widget random post ada banyak macamnya salah satunya yang akan spezer bagikan saat ini. Memang jika memasang random post dan kebetulan random post yang ditampilakan itu memuat judul yang wow untuk pengunjung bisa saja membuat pengunjung tertarik untuk membacanya.


Random post SEO Frendly untuk blog Blogger blogspot

Cara Membuat dan Memasang Random Post di Blogger


Berikut ini adalah kode yang dapat kamu letakan di widget HTML blog anda.
<style>
#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:black;width:60px;height:60px;padding:3px}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_snippet_length=60;
var rdp_info='yes';
var rdp_comment='Comment';
var rdp_disable='';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>
Silahkan masukan kode tersebut di tambahkan widget HTML dan save template. Selesai.

Bagi kamu yang tertarik menggunakan random post bergerak untuk blog silahkan baca artikel yang berjudul; cara memasang random post bergerak di artikel sebelumnya.
Cara Mudah Memasang Widget Like Fanspage Facebook di Blog

Cara Mudah Memasang Widget Like Fanspage Facebook di Blog

Cara memasang halaman fanspage facebook di Blog Blogger. Ada banyak website atau blog yang juga membuat halaman Facebook Fanspage. Mungkin berguna untuk membuat blog lebih terkenal di medsos Facebook.

Berguna juga jika berhasil mengumpulkan banyak like di halaman facebook trsbt, nantinya ketika kamu share artikel dari blog kamu ke Facebook, orang yang me-like halaman tersbt nantinya akan muncul artikel kamu di berandanya. Tentu saja akan membuat blog kamu makin terkenal..hehehehe.

Cara Memasang Widget Like Fanspage Facebook di Blog

Cara Mendapatkan kode Facebook Like Box


1. Login dulu ke akun Facebook Anda  dan masuk ke; Facebook Developers.
2. Disini anggaplah kamu sudah punya halaman facebook, jika belum bisa search Google dulu..hehehe,.
3. Halaman yang akan tampil akan seperti ini, pada Facebook Page URL, masukkan URL Facebook page blog kamu.

memasang Like Fansepage langkah 1

Untuk seterusnya bisa sesuaikan sesuai keinginan. Saya lebih suka menggunakan pengaturan seperti gambar di atas. Klik setting, klik Get Code dan kamu akan mendapatkan 2 kode seperti misalnya gambar di bawah ini:

memasang Like Fansepage langkah 2

Keterangan: Kode pertama dan kedua penempatannya berbeda. Bagaimana Meletakkan Kode?, untuk lebih memudahkan ada misalnya tanpa perlu mengedit lagi template anda, maka anda dapat memilih "IFRAME", kemudian pastekan kodenya ke tambahkan gatget HTML di template anda. Dan untuk cara yang kedua maka anda dapat mencoba kode di Atas dan mempastekannya seperti tutorial berikut ini.

Cara Memasang Widget Facebook Like Box di Blogger


1. Masuk ke Blogger > Template

memasang Like Fansepage facebook langkah 3

2. Backup dulu template kamu
3. Klik Edit HTML
4. Cari kode <body>, gunakan fitur search (Ctrl + F) untuk mempermudah pencarian
5. Masukkan kode pertama tepat di bawah kode <body>

memasang Like Fansepage facebook langkah 4
6. Lalu Save template Anda
7. Sekarang masuk ke Layout

memasang Like Fansepage facebook langkah 5

8. Klik Add a Gadget > pilih HTML/JavaScript

memasang Like Fansepage facebook langkah 6
9. Masukkan kode kedua di situ kemudian klik Save. Lalu letakkan di tempat yang Anda inginkan dengan cara drag dan drop.

Selesai, selamat mencoba,
Modifikasi dan Percantik Tampilan Kotak Komentar Blog

Modifikasi dan Percantik Tampilan Kotak Komentar Blog

Cara memodifikasi/ mengganti tampilan kotak komentar di Blogger. Ok sobat di tutorial blog berikut ini gw akan membagikan mengenai cara mengganti tampilan komentar blog agar terlihat lebih menarik dan lebih keren.

Beberapa template berkurang skor Seonya ketika ada komentar yang masuk/bertambah di postingan tapi ada juga kotak komentar yang memang sudah di design sangat bagus dan bahkan komentarnya dapat terindex mesin pencaharian seperti Google. Nah berikut ini adalah..

Mempercantik Tampilan Kotak Komentar Blog

Cara Memodifikasi Tampilan Kotak Komentar Blog
Modifikasi dan Percantik Tampilan Kotak Komentar Blog

1. Masuk ke dashboard Blogger dan pilih Edit HTML
2. Selanjutnya cari kode seperti ini <b:include data='post' name='threaded_comments'/>
3. Ganti kode tadi dengan kode ini <b:include data='post' name='comments'/>
4. Selanjut nya cari kode ]]></b:skin> kemudian letakan kode dibawah ini diatas kode  ]]></b:skin>
#comments {} #comments h3 {background:#35404d;border:1px solid #1d2630;display:inline;margin-bottom:25px;padding:5px;line-height:40px;position:relative;text-transform:uppercase;color:#fff;font:13px Oswald;border-radius:3px;} #comments h3:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #35404d;border-right:20px solid transparent;width:0;height:0;line-height:0} .comment_avatar_wrap{ width:42px; height:42px; border: 1px solid #151d26; background:#25303c; padding:4px; text-align:center; margin-bottom:20px; } #comments .avatar-image-container { float: left; margin: 0 10px 0 0; width: 42px; height: 42px; max-width:42px; max-height:42px; padding: 0; margin-bottom:10px; } #comments .avatar-image-container img { width: 42px; height: 42px; max-width: 42px; max-height: 42px; background:url(http://2.bp.blogspot.com/-fjaZBtfvzac/UN1mw2tUamI/AAAAAAAADkc/XdKqt8hWZ6w/s1600/anon.jpg) no-repeat; } .comment_name a { font-family:Oswald, Arial, Sans-serif; padding-bottom:10px; font-size:14px; text-decoration: none; } .comment_admin .comment_name { font-family:Oswald, Arial, Sans-serif; padding-bottom:10px; font-size:14px; text-decoration: none; } .comment_admin .comment_date { font-weight: normal; font-size:11px; } .comment_name { font-family:Oswald, Arial, Sans-serif; padding-bottom:10px; font-size:14px; font-weight:normal; position:relative; } .comment_service{ margin-top:5px } .comment_date { color: #999; float:right; font-size:11px; font-weight:normal; } .comment_date a{ color: #a9a9a9; float:right; font-size:11px; font-weight:normal; } .comment_date a:hover{ color: #a9a9a9; text-decoration:none; } .comment_body{ margin-top:-72px; margin-left:65px; background:#25303c; border:1px solid #1d2630; border-top:1px solid #171f28; border-left:1px solid #171f28; padding:15px; } div.comment_inner.comment_admin{ background:#394549; } .comment_body p { line-height: 1.5em; margin: 5px 0 0 0; color: #999; font-size: 13px; word-wrap:break-word; padding-bottom:10px; } .comment_inner { padding: 15px; margin: 5px 0 5px 0; background-color:#35404d; } .comment_child .comment_wrap {padding-left: 5%;} .comment_reply { display: inline-block; margin-top:8px; margin-left:-5px; padding: 1px 12px; color: #fff !important; text-align: center; text-decoration: none; border-radius: 2px; background: #54687c; font: 11px/18px sans-serif; transition: background-color 1s ease-out 0s; } .comment_reply:hover { text-decoration: none !important;; background: #627c96; } .unneeded-paging-control {display: none;} #comment-editor {width:100% !important;background:#e1e3e6 url('http://4.bp.blogspot.com/-TIf6ayZW9R4/UkxBo2beCQI/AAAAAAAAFsA/XR2DBWD3YG4/s1600/kangis-loader.gif') no-repeat 50% 30%;border-radius:4px;margin-bottom:20px;position:relative;} .comment-form {max-width: 100% !important;} .comment_form a { text-decoration: none; text-transform: uppercase; font-weight: bold; font-family: Arial, Helvetica, Garuda, sans-serif; font-size: 15px; } .comment_form a:hover {text-decoration: underline;} .comment_reply_form { padding: 0 0 0 70px; } .comment_reply_form .comment-form {width: 99%;} img.comment_emo {margin:0;padding:0;vertical-align:middle} .comment_emo_list{ display:none; } .comment_emo_list .item { float: left; text-align: center; margin: 10px 10px 0 0; height: 40px; width:41px; } .comment_emo_list span { display: block; font-weight: bold; font-size: 11px; letter-spacing: 1px; } .comment_youtube {max-width:100%!important;width:400px;height:225px;display:block;margin:auto} .comment_img {max-width:100%!important;} .comment_header{width:50px} #respond { overflow: hidden; padding-left: 10px; clear: both; } .comment_avatar img{width:42px;height:42px;background:url(http://2.bp.blogspot.com/-fjaZBtfvzac/UN1mw2tUamI/AAAAAAAADkc/XdKqt8hWZ6w/s1600/anon.jpg) no-repeat} .comment-delete img{float:right;margin-left:15px;margin-top:3px;} .comment_author_flag {display:none} .comment_admin .comment_author_flag {display:inline;font-size:13px;font-weight:normal;padding:2px 6px;right:-23px;margin-top:-23px;color:#fff;border-radius:4px;text-transform:uppercase;position:absolute;width:36px;height:36px;} iframe{border:none;overflow:hidden} .deleted-comment { background:#db6161 url(http://4.bp.blogspot.com/-Yj5ewidrX5Q/UkrG9s3fS5I/AAAAAAAAFrQ/rhhaMJwHDoc/s1600/tempat-sampah.png) no-repeat 2% 50%; color:#efd4d4; line-height: 22px; border: 1px solid #c44d4d; padding:12px 15px 12px 45px; margin:5px 0; display: block; } .comment-form p { background: #54687c; padding: 15px 15px 14px 15px; margin: 5px 0 5px 0; color: #f4f4f4; font-size: 13px; line-height: 20px; border-radius:4px; position:relative; } div.comment_avatar img[src='http://img1.blogblog.com/img/openid16-rounded.gif'] { content: url(http://2.bp.blogspot.com/-8NurYzHIoWQ/Ujc_oLurXII/AAAAAAAAFek/XhAm-oLwg7Q/s45-c/gravatar.png); } div:target .comment_inner{background:#346656;transition:all 15s ease-out;} div:target .comment_child .comment_wrap .comment_inner{background:#404c5c;} iframe{border:none;overflow:hidden}
5. Selanjutnya cari kode di seperti ini <b:includable id='comments' var='post'> .... sampai .... </b:includable>
6. Ganti kode di atas dengan kode di bawah ini
<b:includable id='comments' var='post'> <div class='comments' id='comments'> <b:if cond='data:post.allowComments'> <b:if cond='data:post.numComments != 0'> <h3> <b:if cond='data:post.numComments == 1'>1 <data:commentLabel/>: <b:else/> <data:post.numComments/> <data:commentLabelPlural/> </b:if> </h3> </b:if> <b:if cond='data:post.commentPagingRequired'> <span class='paging-control-container'> <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a> &#160; <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a> &#160; <data:post.commentRangeText/> &#160; <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a> &#160; <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a> </span> </b:if> <div class='clear'/> <div id='comment_block'> <b:loop values='data:post.comments' var='comment'> <div class='data:comment.adminClass' expr:id='data:comment.anchorName'> <b:if cond='data:post.adminClass == data:comment.adminClass'> &lt;div class=&#39;comment_inner comment_admin&#39;&gt; <b:else/> &lt;div class=&#39;comment_inner&#39;&gt; </b:if> <div class='comment_header'> <div class='comment_avatar_wrap'> <div class='comment_avatar'> <img alt='avatar' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author'/> </div> <a class='comment_reply' expr:href='&quot;#r_&quot;+data:comment.anchorName' expr:id='&quot;r&quot;+data:comment.anchorName' onclick='javascript:Display_Reply_Form(this)' title='Balas'>Balas</a> </div> <div class='clear'/> </div> <div class='comment_body'> <span class='comment_arrow'/> <div class='comment_name'> <b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='nofollow' target='_blank'><data:comment.author/></a> <b:else/> <data:comment.author/> </b:if> <span class='comment_author_flag'/> <span class='comment_service'> <a class='comment-delete' expr:href='&quot;http://www.blogger.com/delete-comment.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:comment.id' expr:title='data:top.deleteCommentMsg'> <img alt='delete' src='http://2.bp.blogspot.com/-d-5BS0YCkho/UOKe2UIw0rI/AAAAAAAAC4w/md_iYNVHaHk/s1600/delete4.png' title='Hapus Komentar'/> </a> <span class='comment_date'><a expr:href='data:comment.url' rel='nofollow' title='comment permalink'> <data:comment.timestamp/> </a></span> </span></div> <b:if cond='data:comment.isDeleted'> <span class='deleted-comment'><data:comment.body/></span> <b:else/> <p><data:comment.body/></p> <div class='clear'/> </b:if> </div> <div class='clear'/> &lt;/div&gt; <div class='clear'/> <div class='comment_child'/> <div class='comment_reply_form' expr:id='&quot;r_f_&quot;+data:comment.anchorName'/> </div> </b:loop> </div> <div class='clear'/> <b:if cond='data:post.commentPagingRequired'> <span class='paging-control-container'> <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a> &#160; <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a> &#160; <data:post.commentRangeText/> &#160; <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a> &#160; <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a> </span> </b:if> <div class='clear'/> <div class='comment_form'> <b:if cond='data:post.embedCommentForm'> <b:if cond='data:post.allowNewComments'> <div class='comment_emo_list'/> <b:include data='post' name='threaded-comment-form'/> <b:else/> <data:post.noNewCommentsText/> </b:if> <b:else/> <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' expr:title='data:postCommentMsg'><data:postCommentMsg/></a> </b:if> </b:if> </div> </b:if> </div> <script type='text/javascript'> //<![CDATA[ if (typeof(jQuery) == 'undefined') { //output the script (load it from google api) document.write("<scr" + "ipt type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></scr" + "ipt>"); } //]]> </script> <script async='async' expr:src='data:post.commentSrc' type='text/javascript'/> <script type='text/javascript'> <b:if cond='data:post.numComments != 0'> var Items = <data:post.commentJso/>; var Msgs = <data:post.commentMsgs/>; var Config = <data:post.commentConfig/>; <b:else/> var Items = {}; var Msgs = {}; var Config = {&#39;maxThreadDepth&#39;:&#39;0&#39;}; </b:if> //<![CDATA[ //Global setting Config.maxThreadDepth = 6;//Kedalaman tingkat threaded comment Display_Emo = true;//Tampilkan emoticon? ketik "false" untuk menyembunyikan Replace_Youtube_Link = false;//Embed video YouTube, ketik "false" untuk mendisable Replace_Image_Link = false;//Auto replace link image, ketik "false" untuk mendisable. Replace_Force_Tag = false;//Auto replace virtual tag contoh: [pre] menjadi <pre>, dan [/pre] menjadi </pre>, apabila salah menulis, tidak akan berfungsi Replace_Image_Ext = ['JPG', 'GIF', 'PNG', 'BMP'];//(support: jpg, gif, png, bmp),hanya berfungsi apabila Replace_Image_Link=true //Pengaturan Emoticon Emo_List = [ ':)' ,'http://1.bp.blogspot.com/-2Z7Cwe04x-Q/UH9THzWWJII/AAAAAAAACtA/ChwawyzYsDI/s1600/smile1.gif', ':(' ,'http://4.bp.blogspot.com/-yXc7xHs5mXc/UKhVJLBfdaI/AAAAAAAADPY/LJKRsefyeao/s1600/sad.gif', '=(' ,'http://1.bp.blogspot.com/-7I8DdEs58z0/UKhVKHT1yUI/AAAAAAAADPg/Lyzv-E74EdM/s1600/sadanimated.gif', '^_^' ,'http://1.bp.blogspot.com/-IoZJlpB0-dE/UKhVKnR0BDI/AAAAAAAADPo/Kz87N1Aj4X8/s1600/smile.gif', ':D' ,'http://3.bp.blogspot.com/-WeTjMT8JDhg/UKhVHlZ88II/AAAAAAAADPI/b1gpiAvIkCc/s1600/icon_smile.gif', '=D' ,'http://1.bp.blogspot.com/-ljeobbA3sn0/UKhVGtJsGRI/AAAAAAAADPA/8lyzE4JwrwQ/s1600/hihi.gif', '@@,' ,'http://4.bp.blogspot.com/-w1VfvgO2-e8/UKhVIT7XLhI/AAAAAAAADPQ/cJ0KDjEsoj4/s1600/rolleyes.gif', ';)' ,'http://3.bp.blogspot.com/-5zPfqshivtY/UKhVONWZnkI/AAAAAAAADQI/iCDxagcaj5s/s1600/wink.gif', ':-bd' ,'http://4.bp.blogspot.com/-hPd-oj2Bzo4/UKhVLkmQjOI/AAAAAAAADPw/3O1iuAukZXg/s1600/thumb.gif', ':-d' ,'http://2.bp.blogspot.com/-yElQmFAIiII/UKhVMcObcQI/AAAAAAAADP4/-qdEpW8zCmY/s1600/thumbsup.gif', ':p' ,'http://2.bp.blogspot.com/-bs2e9gRj748/UKhVNKLs2YI/AAAAAAAADQA/mF7lDNOChac/s1600/wee.gif', ]; //Config Force tag list, define all in lower case Force_Tag = [ '[pre]','<pre>', '[/pre]','</pre>', '<pre class="brush: plain; title: ; notranslate" title="">','&lt;code&gt;', '</pre>','</code>' ]; eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('3 o=\'.1c\';3 1b=$(\'#O-19\').G(\'A\');u 1l(F){3 1j=\' \\n\\r\\t\\f\\1D\\1G\\1F\\1E\\2l\\2k\\2i\\2f\\2c\\26\\25\\23\\1Y\\1S\\1N\\1L\\1H\\2v\\1M\\2p\\24\\22\\1R\';E(3 i=0;i<F.5;i++){9(1j.d(F.1Q(i))!=-1){F=F.b(0,i);11}}z F}$(\'#1P .1i p\').j(u(y,7){9(1J){3 l=\'1v://13.V.W/1y?v=\';3 8=7.d(l);D(8!=-1){1d=7.b(8);J=1l(1d);3 X=J.d(\'&\');3 N=\'\';9(X==-1){N=J.b(l.5)}Y{N=J.b(l.5,X)}3 1r=\'<1u B="1T" A="1v://13.V.W/1U/\'+N+\'?1V=1" 1W="0" 2w></1u>\';7=7.b(0,8)+1r+7.b(8+J.5);8=7.d(l);9(8==-1){l=\'1Z://13.V.W/1y?v=\';8=7.d(l)}}}9(21){3 Z=\'\';3 s=7;E(3 i=0;i<1w.5;i++){3 l=\'.\'+1w[i];3 m=s.C();3 8=m.d(l);D(8!=-1){k=s.b(0,8+l.5);m=k.C();3 q=\'2h://\';3 w=m.d(q);3 I=\'\';D(w!=-1){I=q.M();k=k.b(w+q.5);m=k.C();w=m.d(q)}q=\'2n://\';m=k.C();w=m.d(q);D(w!=-1){I=q.M();k=k.b(w+q.5);m=k.C();w=m.d(q)}9(I==\'\'||k.5<6){11}k=I+k;Z+=s.b(0,8+l.5-k.5)+\'<10 A="\'+k+\'" B="2r"/>\';s=s.b(8+l.5);m=s.C();8=m.d(l)}}7=Z+s}9(1A){3 5=x.5;9(5%2==1){5--}E(3 i=0;i<5;i+=2){3 S=\'<10 A="\'+x[i+1]+\'" B="1B"/>\';8=7.d(x[i]);D(8!=-1){7=7.b(0,8)+S+7.b(8+x[i].5);8=7.d(x[i])}}}9(1I){3 5=R.5;9(5%2==1){5--}E(3 i=0;i<5;i+=2){D(1){3 s=7.M();8=s.d(R[i]);9(8!=-1){7=7.b(0,8)+R[i+1]+7.b(8+R[i].5)}Y{11}}}}z 7});$(\'.1K\').j(u(y,7){9(1A){3 5=x.5;9(5%2==1){5--}3 12=\'\';E(3 i=0;i<5;i+=2){3 1e=\'<1f>\'+x[i]+\'</1f>\';3 S=\'<10 A="\'+x[i+1]+\'" B="1B"/>\';12+=\'<Q B="1O">\'+S+1e+\'</Q>\'}z 12}});$(\'.1g .1i p\').j(u(i,h){T=h.M();y=T.d(\'@<a U="#c\');9(y!=-1){14=T.d(\'</a>\',y);9(14!=-1){h=h.b(0,y)+h.b(14+4)}}z h});u 1k(g){r=g.d(\'c\');9(r!=-1)g=g.b(r+1);z g}u 1m(g){g=\'&1X=\'+g+\'#%1n\';1o=1b.20(/#%1n/,g);z 1o}u 1p(){j=$(o).j();$(o).j(\'\');o=\'.1c\';$(o).j(j);$(\'#O-19\').G(\'A\',1b)}u 1q(e){g=$(e).G(\'15\');g=1k(g);j=$(o).j();9(o==\'.1c\'){1s=\'<a U="#1t" 27="1p()">\'+28.29+\'</a><a 2a="1t"/>\';$(o).j(1s)}Y{$(o).j(\'\')}o=\'#2b\'+g;$(o).j(j);$(\'#O-19\').G(\'A\',1m(g))}16=2d.2e.U;17=\'#O-2g\';18=16.d(17);9(18!=-1){1x=16.b(18+17.5);1q(\'#2j\'+1x)}E(3 i=0;i<P.5;i++){9(\'1z\'2m P[i]){3 g=P[i].1z;3 1a=2o($(\'#c\'+g+\':L\').G(\'1C\'));$(\'#c\'+g+\' .2q:L\').j(u(y,7){3 H=P[i].15;9(1a>=2s.2t){$(\'#c\'+H+\':L .2u\').1h()}3 K=$(\'#c\'+H+\':L\').j();K=\'<Q B="1g" 15="c\'+H+\'" 1C="\'+(1a+1)+\'">\'+K+\'</Q>\';$(\'#c\'+H).1h();z(7+K)})}}',62,157,'|||var||length||oldhtml|check_index|if||substring||indexOf|||par_id|||html|img_src|search_key|upper_html||Cur_Cform_Hdr||http_search||temp_html||function||find_http|Emo_List|index|return|src|class|toUpperCase|while|for|str|attr|child_id|save_http|yt_link|child_html|first|toLowerCase|yt_code|comment|Items|div|Force_Tag|img_html|temp|href|youtube|com|yt_code_index|else|save_html|img|break|newhtml|www|index_tail|id|cur_url|search_formid|search_index|editor|par_level|Cur_Cform_Url|comment_form|ht|img_code|span|comment_wrap|remove|comment_body|whitespace|Valid_Par_Id|trim|Cform_Ins_ParID|7B|n_cform_url|Reset_Comment_Form|Display_Reply_Form|yt_video|reset_html|origin_cform|iframe|http|Replace_Image_Ext|ret_id|watch|parentId|Display_Emo|comment_emo|level|x5b|x7d|x7c|x5d|u2008|Replace_Force_Tag|Replace_Youtube_Link|comment_emo_list|u2007|u200a|u2006|item|comment_block|charAt|u3000|u2005|comment_youtube|embed|autohide|frameborder|parentID|u2004|https|replace|Replace_Image_Link|u2029|u2003|u2028|u2002|u2001|onclick|Msgs|addComment|name|r_f_c|u2000|window|location|xa0|form_|HTTP|x0b|rc|x3e|x3c|in|HTTPS|parseInt|u200b|comment_child|comment_img|Config|maxThreadDepth|comment_reply|u2009|allowfullscreen'.split('|'),0,{})) var avatar=$("#comments"); avatar.find('.comment_avatar img').each(function() { var ava = $(this).attr('src'); $(this).show().attr('src', ava.replace(/\/s[0-9]+(\-c)?\//,"/s45-c/")); }); //]]> </script> </b:includable>
9. Terakhir Save Template.

Ok sobat semoga berhasil dan jangan lupa lihat tutorial Blogger terbaru di blog ini dan semoga bermanfaat.