Cara Membuat Recent Comment Widget dengan Gambar Thumbnail di Blog

Cara Membuat Recent Comment Widget dengan Gambar Thumbnail di Blog
Membuat Recent Comment Widget di Blog - Pada artikel sebelumnya, kita sudah belajar banyak cara membuat recent post dengan gambar thumbnail.

Dengan menggunakan beberapa metode penambahan kode html pada template, akhirnya cara terebut bisa berhasil.

Sama halnya dengan tips desain blog kali ini, membuat recent post widget juga menggunakan metode yang sama, yakni dengan menambahkan beberapa kode html dan kita bisa menampilkan komentar tertbaru tersebut dengan desain yang agak unik disertai gambar thumbnail pula.

Metode kedua artikel sebelumnya mungkin agak sedikit berbeda dengan desin tampilan template lain, misalkan saja pada Style SEO Killer. Pada template tersebut sudah secara automatic recent comment bisa tampil elegan pula. Hal ini juga sudah diterapkan pada kakaknya, yakni SL Style Magz.

Cara Membuat Recent Comment Widget dengan Gambar Thumbnail di Blog

Untuk lebih jelasnya bagaimana cara membuat recent comment widget dengan gambar thumbnail di blog yang saya peroleh dari MBT, berikut langkah-langkahnya:

1. Buka akun blogger
2. Pilih template > mode html
3. Copas kode di bawah ini di atas kode </head>
<script async='' src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<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'/>
4. Copas kode di bawah ini di atas kode ]]></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'; }
5. Save template
6. Silakan buka tata letak (layout) pada dashboard blogger > add widget > pilih HTML/JavaScript
7. Copas kode di bawah ini ke dalam widget baru tersebut
<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.mybloggertricks.com/feeds/comments/default?alt=json-in-script&callback=mbtcmts"></script>
<script>document.getElementById("mbtloading").style.display = "none";</script>
8. Save

Mudah kan?

Artikel lanjutan: Cara Membuat Navigasi Halaman (Page Navigation) dengan Nomor pada Blog

Demikian sekelumit desain blog kali ini, khususnya Cara Membuat Recent Comment Widget dengan Gambar Thumbnail di Blog. Semoga bermanfaat, salam.

1 Response to "Cara Membuat Recent Comment Widget dengan Gambar Thumbnail di Blog"

Silakan masukkan komentar Sobat di sini!

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel