» » Cara Membuat Widget Recent Comments Keren Untuk Blogger

Cara Membuat Widget Recent Comments Keren Untuk Blogger

Cara Membuat Widget Recent Comments Keren Untuk Blogger - Blogger memang platform ngeblog yang penuh dengan akeseoris yang bisa memperindah tampilan blog kita, itulah yang disebut Widget. Ada bermacam-macam widget yang bisa sobat Blogger gunakan sesuai dengan fungsinya masing-masing entah untuk menarik lebih banyak visitor atau mempeindah template blog sehingga visitor lebih nyaman. Pada kesempatan kali ini saya akan berbagi Tutorial Cara Membuat Widget Recent Comments yang keren dan terupdate tahun 2016 untuk blog sobat.
Cara Membuat Widget Recent Comments Keren Untuk Blogger by Anas Blogging Tips
Widget Recent Comment Keren
Sebelum memulai tutorial nya, perlu saya ingatkan lagi bahwa jangan terlalu banyak memasang widget pada blog sobat karena yang namanya widget walau bukan lah hal sepele, jika terlalu banyak widget bisa memperlambat loading blog sobat yang bisa mengakibatkan visitor kabur. Jadi, pasang widget yang memang benar-benar berguna saja.

Widget Recent Comments adalah widget yang menampilkan daftar komentar terakhir di semua artikel pada blog sobat. Sebenarnya widget ini tergolong widget yang multifungsi karena memang ada beberapa fungsi utama nya. Diantaranya, dengan widget Recent Comments ini bisa memberitahu apa diskusi yang sedang terjadi di artikel sobat pada visitor dan bisa saja visitor tersebut tertarik untuk memberikan komentar. Dari segi SEO, jika komentar nya masih megandung keyword artikel maka bisa menambah nilai SEO tapi jika terdapat komentar spam malah akan merugikan sobat.

Setelah menelusuri berbagai macam widget recent Comments saya telah memilih satu yang paling bagus dan enak dipandang menurut saya. 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 agar tidak terlalu mempengaruhi kecepatan blog.

Berikut fitur-fitur lengkapnya :

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 efek unik nya adalah ketika blog sedang di loading maka akan muncul gambar GIF berputar yang keren dan unik. Setelah blog terloading dengan sempurna 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 jika di hover ke ikon folder akan muncul judul artikel yang dikomentari tersebut.

Cara Membuat Recent Comments Dengan Thumbnail

1. Buka dashboard blog sobat
2. Pergi ke menu 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 bisa dilewati karena jika terdapat lebih dari 1 script JQuery widget tidak akan muncul.

4. Paste script FontAwesome dan font Oswald berikut di atas kode </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 sobat 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 bisa menggunakan kode tag warna nya.

6. Save template sobat
7. Sekarang saatnya pindah ke menu tata letak dan pilih dimana sobat 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= "'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="http://www.anastips.com/feeds/comments/default?alt=json-in-script&callback=mbtcmts"></script> 
<script>document.getElementById("mbtloading").style.display = "none";</script>

Keterangan :
  • Ganti http://www.anastips.com dengan URL Blog sobat
  • Untuk mengatur jumlah komentar yang muncul, edit bagian ListCount = 5
  • Untuk mengatur jumlah karakter dalam komentar, edit bagian ChrCount = 90
10. Simpan dan lihat hasilnya!

Menurut penuturan dari sang author, beliau sudah memaksimalkan semua fitur dari widget ini dan berharap sobat bisa dengan senang hati memakai nya. Keren bangat kan Widget Recent Comment nya

Dan silahkan follow Anas Blogging Tips untuk terus mengetahui Panduan, Trik, Dan Tips Lengkap Lain nya Tentang Blogging serta nantikan artikel berikutnya ya.

Terima kasih sobat telah membaca artikel "Cara Membuat Widget Recent Comments Keren Untuk Blogger". Sobat tidak diperbolehkan untuk menyalin (copy-paste) segala dan keseluruhan konten Anas Blogging Tips

0 Response to "Cara Membuat Widget Recent Comments Keren Untuk Blogger"

Post a Comment

Subscribe to: Post Comments (Atom)