Cara Menciptakan Widget Recent Comments Keren Untuk Blogger

Cara Membuat Widget Recent Comments Keren Untuk Blogger - Blogger memang platform ngeblog yang penuh dengan akeseoris yang sanggup memperindah tampilan blog kita, itulah yang disebut Widget. Ada majemuk widget yang sanggup anda Blogger gunakan sesuai dengan fungsinya masing-masing entah kepada menarik lebih kaya visitor atau mempeindah template blog sesampai kemudian visitor lebih nyaman. Pada hari ini kali ini admin akan menyebarkan Tutorial Cara Membuat Widget Recent Comments yang keren dan terupdate tahun 2018 kepada blog anda.

Sebelum memulai tutorial nya, perlu admin ingatkan lagi bahwa jangan terlalu kaya memasang widget pada blog anda lantaran yang namanya widget walau bukan lah hal sepele, apabila terlalu kaya widget sanggup memperlambat loading blog anda yang sanggup mengakibatkan visitor kabur. Jadi, pasang widget yang memang benar-benar mempunyai kegunaan saja.

Widget Recent Comments yaitu widget yang menampilkan daftar komentar terakhir di semua artikel pada blog anda. Sebenarnya widget ini tergolong widget yang multifungsi lantaran memang ada sedikit fungsi utama nya. Diantaranya, dengan widget Recent Comments ini sanggup memberitahu apa diskusi yang lagi terjadi di artikel anda pada visitor dan sanggup saja visitor tersebut tertarik kepada memperlihatkan komentar. Dari segi SEO, apabila komentar nya masih megandung keyword artikel maka sanggup menambah nilai SEO namun apabila terdapat komentar spam malah akan merugikan anda.

Setelah menelusuri bermacam macam widget recent Comments admin telah menentukan satu yang paling cantik dan yummy dipandang berdasarkan admin. Widget Recent Comments ini berwarna dasar orange dan putih serta menggunakan UI Color yang mengakibatkan warna nya lebih nyata. Dan yang terakhir, script nya sudah dioptimasi menggunakan script asynchronous yang disetting semoga tak terlalu mempengaruhi kecepatan blog.

Berikut fitur-fitur kompleksnya :

1. Coded in JavaScript using Blogger JSON Feed API

2. Displays author's profile thumbnail - Author Avatar

3. Links author avatar to its Google+ profile

4. Animated Image preloader

5. Shows post title

6. Shows comment date

7. hows comment excerpt (short description snippet)

8. Read more link

9. Lightweight

10. Fluid and responsive

11. Uses tooltips to display info

Salah satu imbas unik nya yaitu ketika blog lagi di loading maka akan muncul gambar GIF berputar yang keren dan unik. Setelah blog terloading dengan tepat akan ada nama dan komentar terakhir yang berada di paling atas daftar nya dan ketika mouse di hover ke nama komentator akan ada detail tanggal nya dan apabila di hover ke ikon folder akan muncul judul artikel yang dikomentari tersebut.

Cara Membuat Recent Comments Dengan Thumbnail

1. Buka dashboard blog anda

2. Pergi ke sajian template dan klik edit html

3. Paste script JQuery berikut di atas kode </head>

<script async='' src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>

Note : Jika sudah ada script JQuery maka tahap ini sanggup dilewati lantaran apabila terdapat lebih dari 1 script JQuery widget tak akan muncul.

4. Paste script FontAwesome dan font Oswald berikut di atas isyarat </head>

<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

5. Paste script berikut di atas tag CSS template anda atau ]]></b:skin>

/*############Recent Comments Widget##################*/
.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'; }

Note : Untuk mengganti warna dasar nya, ganti tulisan orange dengan nama warna yang diinginkan atau sanggup menggunakan isyarat tag warna nya.

6. Save template anda

7. Sekarang saatnya pindah ke sajian tata letak dan pilih dimana anda akan memasang widget Recent Commentnya

8. Jika sudah, tambahkan gadget dan pilih HTML/Javascript

9. Past script berikut didalam nya

<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= "'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSvOp1mQdjerG8JjWHsNg7gz29LzkVpepo8KgvZ4GbaZaDh1H2iMFGz2gKGMpPI-DvgWV09Lalz2u1srvLSEhzEO7i48_3So7urOnQl1Y0Mu4yaTE3IV2-cYnLj6zFHQK-iZx6pCeoNlg/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="http://www.yabs69.com/feeds/comments/default?alt=json-in-script&callback=mbtcmts"></script> 
<script>document.getElementById("mbtloading").style.display = "none";</script>

Keterangan :

• Ganti http://www.yabs69.com dengan URL Blog anda
• Untuk mengatur jumlah komentar yang muncul, edit bagian ListCount = 5
• Untuk mengatur jumlah huruf dalam komentar, edit bagian ChrCount = 90

10. Simpan dan lihat hasilnya!

Menurut penuturan dari sang author, ia sudah memaksimalkan semua fitur dari widget ini dan berharap anda sanggup dengan bahagia hati menggunakan nya. Keren bangat kan Widget Recent Comment nya

Baiklah anda semua, Mungkin itu saja yang sanggup admin terangkan perihal Cara Membuat Widget Recent Comments Keren Untuk Blogger, Semoga artikel ini bermanfaat dan mempunyai kegunaan buat anda semua, Apabila ada yang anda kurang paham silahkan bertanya ke admin di kotak komentar, Apabila admin tak sibuk akan pribadi admin balas, Terima Kasih.

Share this post