Skip to main content

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 sejenianya

3.

Setelah semuanya sudah anda bisa gunakan di blog amp anda dengan cara amp-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 Menu
Masuk 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

Follow us on Instagram
@encepnurdin.id

More from Instagram...

Follow us on Facebook
@encepnurdin.id

Find us on Google Maps
@encepnurdin

Reaksi:

Berbagi Itu Peduli :

Aplikasi: Tambahkan aplikasi encepnurdin. id di smartphone tanpa install, buka encepnurdin. id dengan browser Chrome di smartphone lalu klik ikon 3 titikdi browser kemudian pilih "Tambahkan ke layar utama". Selanjutnya klik aplikasi encepnurdin. id dari layar utama smartphone Anda.