 |
| Pasang Recent Comments di Blogger |
Ketika saya aplikasikan di blog saya, recent comments nya tidak muncul. sehingga saya browsing di mbah google tentang Memasang Recent Comment Terbaru Dzulcyber, akhirnya saya menemukan sebuah tips memasang recent comments dan yang telah saya coba diblog saya hasilnya 100% WORK!
Ikutilah langkah menampilkan recent comment dengan Thumbnail:
- Masuk ke akun blogger Anda.
- Back up template (untuk berjaga-jaga jika terjadi kesalahan)
- Klik Template >> Edit HTML
- Paste kode berikut tepat di atas kode
</head>
Note: Jika template anda sudah dilengkapi dengan jQuery Library abaikan saja langkah ini.<script async='' src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script> - Untuk memaksimalkan tampilan font pastikan template anda sudah support FontAwesome. Jika belum silahkan copy dan pastekan kode berikut ini sesudah kode <head>.
<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/> - Selanjutnya letakkan kode CSS berikut ini di atas kode
]]></b:skin>.dcyber{list-style-type:none; overflow:hidden; } .dcyber li {margin:0px auto 5px auto; clear:both; color:#666;font-size:12px;padding:0px;} .dcyber i{color:#999; padding-right:4px;} .dcyber .prof {font-size:14px;line-height:1.2;padding-bottom:0margin-bottom:4px;} .dcyber .idate {display:block; font-size:11px;text-align: left;padding:3px; margin:0 0 0px 20px} .dcyber .icontent{ display:block; color:#444; font-size: 11px;line-height:1;margin-top:3px} .dcyber .icontent a {color:#999; text-decoration:none; font-weight: bold;font-style: normal;} .dcyber div{line-height:2em; clear:both; border-top:1px solid #eee; margin-top:5px;} .dcyber span { margin:5px 0px 0px; padding-right:5px;} .dcyber img {border-radius:100%; float:left; margin:0px 5px 2px 0px; border:1px solid #eee; padding:0; width:40px; height:40px;} .dcyber .icapital {text-transform:Capitalize; display:inline-block;} .dcyber .ititle {font-size:14px; color:orange; font-weight:normal; text-decoration:none;} .dcyber .ititle:hover {color:#666;} .dcyber .idate:before, .dcyber .ipostTitle a:before{font-family:fontAwesome; position:relative; padding-right:5px;} .dcyber .idate:before {content:'\f017'; color:#999} .dcyber .ipostTitle a {text-decoration:none; color:#999} .dcyber .ipostTitle a:before {content:'\f07c'; } #dcloading{margin: 20% auto;background: url('http://downloads.mybloggertricks.com/Spin%20and%20pulsate.gif') no-repeat left center;width: 80px;height: 80px;} - Simpan Template.
- Lalu Klik menu Tata Letak dan klik Tambahkan Gadget.
- Pilih HTML/JavaScript kemudian copy dan paste script dibawah ini.
Lalu klik Simpan, dan lihat hasilnya.<div id="dcloading" ></div> <script type="text/javascript"> //<![CDATA[ function dcyber(json) { document.write('<ul class="dcyber">'); for (var i = 0; i < ListCount; i++) { //################### Variables Declared var listing= ListImage = ListUrl = ListDate = TotalPosts = ListTitle = ListImage = ListContent = ListConten = ListAuthor = ListTag = ListProfile = ListComments = thumbUrl = sk = ListMonth = Y = D = M = m = ""; //################### URL for (var j = 0; j < json.feed.entry[i].link.length; j++) { if (json.feed.entry[i].link[j].rel == 'alternate') { break; } } if(json.feed.entry[i].link[2] != null) { ListUrl= "'" + json.feed.entry[i].link[j].href + "'"; } else {ListUrl = "'#'"} //################### Info TotalPosts = json.feed.openSearch$totalResults.$t; ListAuthor= json.feed.entry[i].author[0].name.$t; var ListAuth = ListAuthor.split(" "); var ListAuth = ListAuth.slice(0, 1).join(" "); ListProfile= "'" + json.feed.entry[i].author[0].uri.$t + "'"; //################### Content Check ListConten = json.feed.entry[i].content.$t; ListContent= ListConten.replace(/(<([^>]+)>)/ig,"").substring(0, ChrCount); //################### Date Format ListMonth= ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; ListDate= json.feed.entry[i].published.$t.substring(0, 10); Y = ListDate.substring(0, 4); m = ListDate.substring(5, 7); D = ListDate.substring(8, 10); M = ListMonth[parseInt(m - 1)]; //################### Thumbnail Check if (json.feed.entry[i].author) { thumbUrl = json.feed.entry[i].author[0].gd$image.src; sk= thumbUrl.replace("/s72-c/","/s60-c/"); ListImage= "'" + sk + "'"; } else { ListImage= "'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_ScRqDb_TwdxqozbFFTYWVjgi7BEx_qYiz4A6e_LFv5WaqYMv73E34kz9EufZChCmnFhn-rscPPZcc2xsDmao1Vfg2bXZHvXsR5eid0Hi6_ftyZzaAH-tKwBk7T6SvAz0BelV8fPEN6Q/s200/Icon.png'"; } //################### Printing List var listing = "<li class='node"+[i]+"' ><a rel='nofollow' href="+ListProfile+ "><img src="+ListImage+"/></a><a href="+ListUrl +"target='_blank'><span class='prof'><b>"+ListAuthor+"</b></span> | "+ M +" "+ D +", "+ Y +" » <span class='icontent'>"+ ListContent+"... </span></a></li>"; document.write(listing); } document.write('<div class="itotal"> <span> '+TotalPosts+' </span><i>delicious comments posted so far!</i></div></ul>'); } </script> <script> var ListCount = 5; var ChrCount = 90; </script> <script src="/feeds/comments/default?alt=json-in-script&callback=dcyber"></script> <script>document.getElementById("dcloading").style.display = "none";</script>
ListCount = 5 adalah jumlah komentar yang ditampilkan, isi sesuai keinginan Anda. Sedangkan ChrCount = 90 adalah jumlah karakter isi komentar yang ditampilkan, isi sesuai keinginan.
Dalam tutorial masih banyak kekurangan, salah satunya adalah komentar admin blog masih ditampilkan, saya masih mencari tutorial cara menyembunyikan komentar Admin blog di recent comments untuk melengkapi tutorial ini. Terima kasih telah membaca!
Jika berkenan tinggalkan jejak dengan berkomentar sesuai dengan topik.
0 Komentar