Cara memasang widget recent post seperti Xadow Magz Blogger Template
Langkah pertama, silahkan mengambil kesempatan untuk login ke Blogger > Theme > Edit HTML.
Tambahkan kode CSS berikut ini di atas kode </style> atau ]]>/b:skin>
/* Recent Posts Gadget By STCnetwork.org */
.relatedlist {list-style-type:none;overflow:hidden; margin:0 auto; padding:0;max-width:300px}
.relatedlist li {margin:0 auto 10px auto; clear:both; color:#666; font-size:12px; border-bottom:1px solid #eee; overflow:hidden; position:relative;line-height:1.4em;}
.relatedlist li:last-child{margin:0}
.relatedlist li a { color:#666; text-decoration:none}
.relatedlist i{color:#999; padding-right:5px; }
.relatedlist .iline{line-height:1.2em; margin-top:3px;}
.relatedlist .icontent{line-height:1.5em; margin-top:5px;}
.relatedlist div span{margin:0 5px 0 0; display:inline-block;font-weight: normal; }
.relatedlist .mbttitle {font-size:13px; color:#000; font-weight:normal;margin:5px auto; text-decoration:none;display:block}
.relatedlist .mbttitle:hover, .relatedlist .itotal a:hover {color:#0E9D58; text-decoration:none;}
.relatedlist .iedit a{text-decoration:none; color:#999; cursor:pointer}
.relatedlist .iedit:before, .relatedlist .iauthor:before, .relatedlist .itag:before, .relatedlist .icomments:before, .relatedlist .idate:before, .relatedlist .itotal span:before{font-family:fontAwesome; position:relative; padding-right:8px; color:#999;}
.relatedlist .iauthorpic{width: 17px;height: 17px;border-radius: 50%;
float: none; display: inline-block; margin:0; padding-right:3px; position:relative; top:3px;}
.relatedlist .itag{color: #fff;position: absolute;left: 7px;top: 12px;display: inline-block;}
.relatedlist .itag a{background:#000;background:rgba(0,0,0,0.7);text-decoration:none;color:#fff;padding:4px 5px;text-transform:uppercase;font-size: 8px!important;letter-spacing:1px;display:none}
.relatedlist .itag a:first-child{display:block}
.relatedlist .itag a:hover{background:#000; color:#0E9D58; text-decoration:none;}
.iFeatured{overflow:hidden;position:relative;float:left;margin:0 5px 10px 0;padding:0;}
.iFeatured a {padding:0 7px 0 0;display: block;margin:5px auto 0}
.iFeatured img{width:132px;height:85px;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;}
.iFeatured:hover img{ opacity:1;}
.relatedlist .icomments a{color:#0080ff;font-size:12px;}
.relatedlist .icomments a:hover{text-decoration:underline}
.relatedlist .icomments:before {content:'\f086'; padding:0px 3px 0px 7px; color:#84DB06;}
.relatedlist .idate:before {content:'\f073';padding-right:3px}
.relatedlist .iedit:before {content:'\f040';}
.relatedlist .imore {font-size:16px; font-weight:bold; text-decoration:none; color:#666;}
.relatedlist .itotal {color:#333; padding:5px 0px; }
.relatedlist .itotal a {font-size:12px; font-weight:normal; color:#0080ff; text-decoration:none}
.relatedlist .itotal span:before {content:'\f07c';}
.relatedlist .itotal span font {padding:0px 3px; color:#333;font-size:15px; font-weight:bold}
Selanjutnya, simpan Template
Langkah berikut adalah pergi ke tempat lain dengan mengklik Tata Letak/Layout > Lihat Sidebar > Tambah Gadget > HTML/JavaScript.
Lalu copy-paste code JavaScript ini ke dalamnya:
<script type="text/javascript">
var ListCount = 4;
var ListLabel = "";
var ChrCount = 45;
var TitleCount = 66;
var ImageSize = 200;
var showcomments = "off";
var showdate = "on";
var showauthor = "on";
var showthumbnail = "on";
var showlabel = "on";
var showcontent = "off";
var showTotal = "off";
//################ Function Start
function relatedlist(json) {
document.write('<ul class="relatedlist">');
for (var i = 0; i < ListCount; i++)
{
//################### Variables Declared
var listing= ListImage = ListUrl = ListTitle = ListImage = ListContent = ListConten = ListAuthor = ListTag = ListDate = ListUpdate = ListComments = thumbUrl = TotalPosts = sk = AuthorPic= ListMonth = Y = D = M = m = YY = DD = MM = mm = TT = "";
//################### Category
if (json.feed.entry[i].category != null)
{
for (var k = 0; k < json.feed.entry[i].category.length; k++) {
ListTag += "<a href='/search/label/"+json.feed.entry[i].category[k].term+"'>"+json.feed.entry[i].category[k].term+"</a>";
if(k < json.feed.entry[i].category.length-1)
{ ListTag += " ";}
}}
//################### URL
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
ListUrl= "'" + json.feed.entry[i].link[j].href + "'";
//################### Info
TotalPosts = json.feed.openSearch$totalResults.$t;
if (json.feed.entry[i].title!= null)
{
ListTitle= json.feed.entry[i].title.$t.substr(0, TitleCount);
}
if (json.feed.entry[i].thr$total)
{
ListComments= "<a href='"+json.feed.entry[i].link[j].href+"#comment-form'>"+json.feed.entry[i].thr$total.$t+"</a>";
}
ListAuthor= json.feed.entry[i].author[0].name.$t.split(" ");
ListAuthor=ListAuthor.slice(0, 1).join(" ");
AuthorPic = json.feed.entry[i].author[0].gd$image.src;
//################### 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)];
ListUpdate= json.feed.entry[i].updated.$t.substring(0, 16);
YY = ListUpdate.substring(0, 4);
mm = ListUpdate.substring(5, 7);
DD = ListUpdate.substring(8, 10);
TT = ListUpdate.substring(11, 16);
MM = ListMonth[parseInt(mm - 1)];
//################### Thumbnail Check
// YouTube scan
if (json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/) != null)
{
var youtube_id = json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/).pop();
if (youtube_id.length == 11) {
var ListImage = "'//img.youtube.com/vi/"+youtube_id+"/0.jpg'";
}
}
else if (json.feed.entry[i].media$thumbnail)
{
thumbUrl = json.feed.entry[i].media$thumbnail.url;
sk= thumbUrl.replace(/.*?:\/\//g , "//").replace("/s72-c/","/s"+ImageSize+"/");
ListImage= "'" + sk.replace(/.*?:\/\//g , "//").replace("?imgmax=800","") + "'";
}
else if (json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/) != null)
{
// Support For 3rd Party Images
ListImage = json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1];
}
else
{
ListImage= "'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR3uAh7R1kXVDw_VhT2-28_JgpZiOQ3Jb6DzlK4LTED8roV6mHCCsPwWBwQb7ZbJSgwp0s18AdA1CD6gl2K-30VADPumCkkEOkzzQx9mLUaPPBH97aEZbXQpaGbiwa_jfjv7_nbmNMGSY/s200/Icon.png'";
}
//################### Printing List
document.write( "<li class='node"+[i]+"' >");
if (showthumbnail == 'on'){
document.write("<div class='iFeatured'><a href="
+ ListUrl+
"><img src="
+ListImage+
"/></a></div>");
}
if (showlabel == 'on'){
document.write("<span class='itag'>"
+ListTag +
"</span>");
}
document.write("<a class='mbttitle' href="
+ ListUrl+
">"
+ ListTitle+
"</a><div class='iline'>");
if (showauthor == 'on'){
document.write("<span class='iauthor'><img class='iauthorpic' src='"+AuthorPic+"'/>"
+ListAuthor+
"</span>");
}
if (showcomments == 'on'){
document.write("<span class='icomments'>"
+ListComments +
"</span> ");
}
if (showdate == 'on'){
document.write("<span class='idate'>"
+ M +
" "
+ D +
"</span>");
}
if (showcontent == 'on'){
document.write("<div class='icontent'>"
+ListContent +
"...</div> ");
}
document.write("</div></li>");
}if (showTotal == 'on'){
document.write("<div class='itotal'><span> <a href='/search/label/"+ListLabel+"'>View all <font>"+TotalPosts+"</font> posts in ? " +ListLabel+" </a></span></div>");
}
document.write("</ul>");
}
document.write("<script src='/feeds/posts/default?alt=json-in-script&callback=relatedlist'></"+"script>");
</script>
Silahkan atur terlebih dahulu angka yang tertera pada kode var ListCount = 4; sesuaikan dengan jumlah artikel yang ingin Anda tampilkan pada widget tersebut.
Anda juga bisa mengubah fitur lainnya dengan memainkan fungsi �on� dan �off� pada kode-kode di bawahnya.
Perlu diperhatikan.
Widget ini menggunakan FontAwesome, jadi pastikan di template Anda terdapat link pemanggil FontAwesome.
Jika belum ada, silahkan simpan kode berikut ini, letakkan di atas kode </head> atau </head><!--<head/>-->
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) };loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>
Demikian tutorial cara memasang related post mirip template Xadow Magz.
Comentarios: