Oke Guys. Setelah Saya Memberikan Tutorial
Kali Saya akan Memberikan Tutorial Cara Membuat Widget Featured Post Berdasarkan Label Keren Dan Responsive .Cara Memasang nya sangat gampang, bisa dilakukan dengan cara :
Kopy Script Dibawah Ini > Pilih Tata Letak ( LayOut ) > Add a gadget > HTML/Javascript
<style>
.tabs-md {
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.16);
z-index: 2;
}
.tabs-md .tab {
clear:inherit !important;
}
.collection .collection-item.avatar {
height: inherit !important;
min-height: 64px;
max-height: 83px;
}
.collection-md {
border:0;
border-bottom: 1px solid #E0E0E0;
}
</style>
<script>
function showrecentpostswiththumbs(json) {
document.write('<ul class="collection collection-md">');
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
var commenttext = entry.link[k].title;
var commenturl = entry.link[k].href;
}
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
var thumburl;
try {
thumburl = entry.media$thumbnail.url;
} catch (error)
{
s = entry.content.$t;
a = s.indexOf("<img");
b = s.indexOf("src=\"", a);
c = s.indexOf("\"", b + 5);
d = s.substr(b + 5, c - b - 5);
if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
thumburl = d;
} else thumburl = 'http://lh4.ggpht.com/_IjrRiI_bVb0/TOCYn1fMjII/AAAAAAAAF24/5Fvv-HJqh74/loading-2.gif';
}
var postdate = entry.published.$t;
var cdyear = postdate.substring(0, 4);
var cdmonth = postdate.substring(5, 7);
var cdday = postdate.substring(8, 10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
document.write('<li class="collection-item avatar">');
if (showpostthumbnails == true)
document.write('<img class="circle" src="' + thumburl + '"/>');
document.write('<b><a href="' + posturl + '" target ="_top">' + posttitle + '</a></b><br/>');
if ("content" in entry) {
var postcontent = entry.content.$t;
} else
if ("summary" in entry) {
var postcontent = entry.summary.$t;
} else var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write('<i>');
document.write(postcontent);
document.write('</i>');
} else {
document.write('<i>');
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0, quoteEnd);
document.write(postcontent + '...');
document.write('</i>');
}
}
var towrite = '';
var flag = 0;
document.write('<div>');
if (showpostdate == true) {
towrite = towrite + monthnames[parseInt(cdmonth, 10)] + '-' + cdday + ' - ' + cdyear;
flag = 1;
}
if (showcommentnum == true) {
if (flag == 1) {
towrite = towrite + ' | ';
}
if (commenttext == '1 Comments') commenttext = '1 Comment';
if (commenttext == '0 Comments') commenttext = 'No Comments';
commenttext = '<a href="' + commenturl + '" target ="_top">' + commenttext + '</a>';
towrite = towrite + commenttext;
flag = 1;;
}
if (displaymore == true) {
if (flag == 1) towrite = towrite + ' | ';
towrite = towrite + '<a href="' + posturl + '" class="url" target ="_top"><small>READ MORE</small></a>';
flag = 1;;
}
document.write(towrite);
document.write('</div></li>');
if (displayseparator == true)
if (i != (numposts - 1));
}
document.write('</ul>');
}
var numposts = 5;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 150;
</script>
<div class="row">
<div class="col s12">
<ul class="tabs tabs-md">
<li class="tab col s3"><a class="active" href="#test1">
LABEL 1</a></li>
<li class="tab col s3"><a href="#test2">
LABEL 2</a></li>
<li class="tab col s3"><a href="#test3">
LABEL 3</a></li>
</ul>
</div>
<div id="test1" class="col s12">
<script src="http://
LowTekno.blogspot.com/feeds/posts/default/-/
YOUR LABEL 1?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>
</div>
<div id="test2" class="col s12">
<script src="http://
lowtekno.blogspot.com/feeds/posts/default/-/
YOUR LABEL 2?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>
</div>
<div id="test3" class="col s12">
<script src="http://
lowtekno.blogspot.com/feeds/posts/default/-/
YOUR LABEL 3?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>
</div>
</div>
Pada kesempatan saat ini Saya akan membagikan tutorial bagaimana cara membuat efek shadow di pinggir template blog. Agar blog terlihat menarik kita dapat mempercantiknya dengan melakukan perubahan- perubahan di template blog, misalnya dengan menambahkan efek bayangan di pinggir/tepi blog. Walaupun sederhana tapi dapat mempercantik template blog anda.
