Cara Membuat Widget Recent Comment Valid Amp
Widget recent comment atau widget list komentar adalah widget yang bisa menampilkan daftar komentar mulai dari komentar lama sampai komentar terbaru secara berurutan tentang aktivitas komentar di sebuah blog ,Yang tentunya widget ini biasanya di pasang di sedebar atau footer blog.Fungsi Widget Recent Comment
Mungkin anda bertanya apa sih kegunaan dan fungsi memasang widget Recent Comment ini ?
Untuk fungsi widget ini sih sebenarnya cuma menampilkan daftar aktivitas komentar dari paling lama sampai komentar terbaru kepada penggunjung, Sehingga penggunjung bisa lebih tertarik lagi tentang blog kita , Ya dengan adanya aktivitas komentar terkait di widget recent comment yang cukup banyak di blog kita ini bisa menjadi nilai plus bagi penggunjung terhadap blog tersebut , penggunjung akan lebih percaya tentang artikel yang kita posting karna melihat banyak yang berkometar.
Manfaat Memasang Widget Recent Comment
Sementara untuk manfaat memasang widget recent comment di blog penggunjung akan melihat daftat/list komentar di widget tersebut sehingga memungkinkan penggunjung meng klik artikel komentar terkait di widget tersebut, Dan tentunya akan menjadi keuntungan buat meliik blog tersebut untuk meningkatkan bounce rate halaman atau page views lebih tinggi lagi.
Dengan memasang widget recent comment di blog bisa menjadi kebanggan tersendiri jika suatu postingan di blog kita banyak di kunjungi dan di baca orang, kemudian visitor meninggalkan banyak jejak di kolom komentar. Itu menandakan blog kita sedikit banyaknya memberikan manfaat bagi yang membacanya.
Maka dari itu pada artikel kali ini saya akan membahas bagaimana caranya memasang widget recent comment di blog.
Dan kali ini saya akan menunjukan pada penggunjung blog ini cara memasang widget recent comment di blog yang sudah valid AMP
Cara Membuat Widget Recent Comment Di Blog Valid AMP
Di sini saya akan membuat sebuah widget recent comment di blogger yang sudah valid amp
Untuk memasang widget recent comment di blog amp sedikit sulit karna harus mengguakan
javascript yang bukan dari amp sehingga untuk penerapannya pun sangat susah, maka dari itu solusinya kita bisa memanfaatkan layana dari pihak ketiga yaitu dengan menggunakan Github.Jadi kita bisa simpan atau hosting file html dan javascript di github kemudian kira bisa menampilkan di blog amp dengan menggunakan
amp-iframe.Untuk tampilannya cukup simple namun tetap terlihat elegan.
Dan untuk penerapannya cukup gampang, jika ingin menggunakan widget ini berikut ini langkah-langkahnya :
1.
Pertama silahkan simpan atau salin kode berikut ini , kemudian anda upload ke Github , misalnya beri nama file Recent Comment Amp
<!DOCTYPE html>
<html>
<head>
<style>.mbtcmts{list-style-type:none; overflow:hidden; } .mbtcmts li {margin:0px auto 20px auto; clear:both; color:#666; font-family:helvetica; font-size:12px;padding:0px;} .mbtcmts i{color:#999; padding-right:4px;} .mbtcmts .idate {display:block; font-family:arial; font-size:11px;text-align: left;padding:3px; margin:0 0 0px 40px} .mbtcmts .icontent{ display:block; font-family:Georgia; color:#999; font-style:italic; line-height:1.5em;} .mbtcmts .icontent a {color:#999; text-decoration:none; font-weight: bold;font-size: 16px;font-style: normal;} .mbtcmts div{line-height:2em; clear:both; border-top:1px solid #eee; margin-top:5px;} .mbtcmts span { margin:5px 0px 0px; padding-right:5px;} .mbtcmts img {border-radius:100%; float:left; margin:0px 20px 20px 0px; border:1px solid #eee; padding:3px; width:50px; height:50px;box-shadow: 2px 2px 4px #ddd; } .mbtcmts .icapital {text-transform:Capitalize; display:inline-block;} .mbtcmts .ititle {font-family:oswald; font-size:14px; color:orange; font-weight:normal; text-decoration:none;} .mbtcmts .ititle:hover {color:#666;} .mbtcmts .idate:before, .mbtcmts .ipostTitle a:before{font-family:fontAwesome; position:relative; padding-right:5px;} .mbtcmts .idate:before {content:'\f017'; color:#999} .mbtcmts .ipostTitle a {text-decoration:none; color:#999} .mbtcmts .ipostTitle a:before {content:'\f07c'; } #mbtloading{ margin: 20% auto;background: url('http://downloads.mybloggertricks.com/Spin%20and%20pulsate.gif') no-repeat left center;width: 80px;height: 80px;} /*------ CSS3 Tooltip Shortcode -------------*/ .tooltip{outline:none;text-decoration:none!important;position:relative}.tooltip:hover {border-bottom: none;}.tooltip strong{line-height:30px}.tooltip > span{text-transform:capitalize;width:150px; padding:5px 5px;opacity:0;top:120%;left:0px; visibility:hidden;z-index:10;position:absolute;font-family:helvetica;font-size:12px;font-weight:bold;border-radius:2px;box-shadow:2px 2px 5px #999;-webkit-transition-property:opacity,margin-top,visibility,margin-left;-webkit-transition-duration:0.4s,0.3s,0.4s,.3s;-webkit-transition-timing-function:ease-in-out,ease-in-out,ease-in-out,ease-in-out;transition-property:opacity,margin-top,visibility,margin-left;transition-duration:0.4s,0.3s,0.4s,.3s;transition-timing-function:ease-in-out,ease-in-out,ease-in-out,ease-in-out}.tooltip > span img{float:right;width:110px;margin:0 0 30px 10px;padding: 0;border: none;}.tooltip:hover > span{opacity:1;text-decoration:none;visibility:visible;overflow:visible;display:inline;margin-left:-50px}.tooltip span b{width:15px;height:15px;left:30%;top:-9px;display:block;position:absolute;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);display:none\0/;*display:none}.tooltip > span{padding-top:10px;color:#fff;background:orange;border:1px solid #ffffff}.tooltip span b{background:orange;border-top:1px solid #ffffff;border-right:1px solid #ffffff}.mbtcmts .itotal {color:#333; padding:3px 3px 3px 10px; border:1px solid #eee; font-family:arial; font-size:12px;} .mbtcmts .itotal i {font-style:normal;} .mbtcmts .itotal span{font-family:oswald; font-weight:normal; color:#333; text-decoration:none} .mbtcmts .itotal span:before {font-family:FontAwesome; position:relative; content:'\f075'; }</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script async src='/cdn-cgi/bm/cv/2181903173/api.js'></script></head>
<div id="mbtloading" ></div>
<script type="text/javascript">
function mbtcmts(json) {
document.write('<ul class="mbtcmts">');
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 = "'#'"}
//####################### Splitting URL into Title
if(json.feed.entry[i].link[2] != null)
{
var mbt_slit = json.feed.entry[i].link[j].href;
var M_slit = mbt_slit.split("#");
M_slit = M_slit [0];
var K_slit = M_slit.split("?");
K_slit = K_slit[0];
var B_slit = K_slit.split("/");
B_slit = B_slit[5];
B_slit = B_slit.split(".html");
B_slit = B_slit [0];
var T_slit= B_slit.replace(/-/g, " ").charAt(0).toUpperCase()+ B_slit.replace(/-/g, " ").slice(1).substring(0, 50);
var Link_slit= T_slit.link(K_slit);
}
//################### 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= "'http://4.bp.blogspot.com/-HALLtgFeep0/VfryhQ0C5oI/AAAAAAAAPcY/77mSGND4q84/s200/Icon.png'";
}
//################### Printing List
var listing = "<li class='node"+[i]+"' ><a rel='nofollow' href="
+ListProfile+
"><img src="
+ListImage+
"/></a><a class='ititle tooltip' href="
+ListUrl +
"target='_blank'><span><b></b>"
+ListAuth+
" Commented on » "
+ M +
" "
+ D +
", "
+ Y +
"</span>"
+ ListAuthor+
"</a> <i> posted in</i> <span class='ipostTitle'><a class='tooltip' href='"
+K_slit+
"'><span><b></b>"
+T_slit+
"</span></a></span><span class='icontent'>" + ListContent+" ... <a href="+ListUrl+"> » </a></span><div></div></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="https://www.encepnurdin.id/feeds/comments/default?alt=json-in-script&callback=mbtcmts"></script>
<script>document.getElementById("mbtloading").style.display = "none";</script>
<script type="text/javascript">(function(){window['__CF$cv$params']={r:'59784e796f470ab4',m:'2bdae77ad0a76169ee9e3df9ef6e37e50ae675e0-1590169063-1800-ARuif2dOHOVBVlNHdkvJiuCX0ZZU1u1G2vop1WoW34FkI1ErICHg6q4fttixjTHudxAfiRhAZEMYhk/XJ4XlRlHFvQdE8OJsGlAeJiX2CpOvrxncYgTcgJz6YwlGsKUz5d2itOaE6vqVmHaPnLbvxowdgsdCO+kM3srqMYDEQg7pqrBxqjWdWZzNQUPDExNrWzYojrsN2uVvdiHASvn+bMFd4jRH5ZVpdq33A32byoiL',s:[0xbd341c888e,0x2df056895d],}})();</script></body>
</html>Keterangan :
Silahkan ganti url encepnurdin.id dengan alamat blog anda
Untuk mengatur jumlah list yang mau di tampilkan atur
var ListCount = 5; untuk tampilan 5 recent comment
var ChrCount = 90; untuk total recent comment yang mau di tampilkan
Selebihnya anda bisa atur sendiri
2.
Setelah anda Upload ke Github selanjutnya untuk bisa di tampilkan di blog amp di perlukan cdn delivery network , anda bisa mengguanakan rawcdn.githack atau sejenianya3.
Setelah semuanya sudah anda bisa gunakan di blog amp anda dengan caraamp-iframe<amp-iframe height="350"
layout="fixed-height"
sandbox="allow-scripts allow-same-origin allow-popups"
frameborder="0"
src="https://rawcdn.githack.com/Githubencep/blog.github.io/0e88a450f586d300b3ad142760741cbbb2e070dd/Resentcomments.html"></amp-iframe>Ketetangan :
Ganti Url rawcdn.githack anda
4.
Untuk penerapannya anda bisa pasang di sedebar ataupun di footer blog anda, Seperti biasa login ke blogger kemudian masuk MenuMasuk ke Tataletak dan pilih Add A Gatget => Add HTML/Javascript , Simpan
Setelah kostumisasinya selesai langsung saja klik Save/Simpan dan cek hasilnya.
Begitulah caranya memasang widget recent comment di blog amp semoga bermanfaat dan selamat mencoba.
Baca juga