Cara Membuat Recent Post Thumbnail Di Wordpress
Pada mala ini saya akan mebahas tentang membuat Recent Post Dengan Thumbnail Keren Dan Terbaru nah bagi anda yang sedeng mencari kode Recent Post Dengan Thumbnail ini kode yang pasti cocok dan Soe dengan kode menu Recent Post Dengan Thumbnail ini blog anda akan keliatan lebih soe dan Maco seperti anda lihat di tanpilan blog blog yang pasti menu Recent Post pada cantik cantik dan keren ,maka kali ini saya akan shree kode wigdet Recent Post Dengan Thumbnail Keren Dan Terbaru ,jika anda mau lihat jelas anda bisa lihat pada gambar di bawah ini.
Langakah Permata
1. Kamu Login saja ke blogger
3. Dan kamu pilih Saja Menu Tata Letak >> Tambahkan Gendet Dan kamu pilih menu HTML/JavaScript
4.Langkah Selanjutnya kamu masukan kode di bawah pada kotak Wigdet.
5. Munkin hanya ini saja yang saya bisa sampaikan ke pada kalin tentang Cara Membuat Recent Post Dengan Thumbnail Keren Dan Terbaru,semoga dengan kode Cara Membuat Recent Post Dengan Thumbnail Keren Dan Terbaru ini blog anda menjadi lebih keren dari pada sbelumnya ,jika anda ada haal yang menganjal pada tutorial ini silahkan untuk comen saja di bawah munkin saya bisa membantu kalain, cukup sekian terimakasih anda telah mebaca artikel Cara Membuat Recent Post Dengan Thumbnail Keren Dan Terbaru semoga bisa bermanpaat bagi anda wasalam.

Seperti yang kamu lihat tanpilan nya lebih maco dan lebih Seo,baukan hanya itu saja kode Recent Post di lengkapi dengan jumblah comen,Author profile secra otomatis dan jumblah artikel, maka dengan kode Recent Post Dengan Thumbnail Keren maka blog anda akan semakin keren dan lebih bagus ,itu saja yang saya bisa sampaikan ke pada kalin jika anda minat mau memasangkan kode Recent Post Dengan Thumbnail Keren pada blog kalin anda bisa ikuti saja pada tutorial di bawah ini.
1. Kamu Login saja ke blogger
2. Kemudian kamu pilih saja Menu Tambahkan Wigdet pada blog anda
3. Dan kamu pilih Saja Menu Tata Letak >> Tambahkan Gendet Dan kamu pilih menu HTML/JavaScript
4.Langkah Selanjutnya kamu masukan kode di bawah pada kotak Wigdet.
<script type="text/javascript">Keterangan
//#################### Default Settings
var ListBlogLink = "http://tutorialcid.blogspot.co.id";
var ListCount = 4;
var ListLabel = "SEO";
var ChrCount = 45;
var TitleCount = 66;
var ImageSize = 200;
var showcomments = "on";
var showdate = "off";
var showauthor = "on";
var showthumbnail = "on";
var showlabel = "on";
var showcontent = "off";
var showTotal = "on";
//################ Function Start
function mbtlist(json) {
document.write('<ul class="mbtlist">');
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='"+ListBlogLink+"/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("/s72-c/","/s"+ImageSize+"/");
ListImage= "'" + sk.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/AVvXsEgVYdxqji0mchJwHs0nnz2NZUgyxCQG6MqzBYEuVGr6tT2TaHJJriqzozRsuo6wRFxRURG3dLePoXCd3bRrNlDswU9YwO0fjxo_GlvyiQ7JcAf5eRjGPCZi8pba0gNXNitQNWz2LPQWdBc/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='"+ListBlogLink+"/search/label/"+ListLabel+"'>View all <font>"+TotalPosts+"</font> posts in ? " +ListLabel+" </a></span></div>");
}
document.write("</ul>");
}
document.write("<script src='"+ListBlogLink+"/feeds/posts/default?alt=json-in-script&callback=mbtlist'></"+"script>");
</script>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style>
/*------Recent Posts Gadget By STCnetwork.org--------*/
.mbtlist{list-style-type:none;overflow:hidden;margin:10px 0!important;width:300px;padding:0!important}
.mbtlist li{margin:0 auto 10px auto;clear:both;color:#666;font-family:helvetica;font-size:12px;border-bottom:1px solid #eee;overflow:hidden;position:relative}
.mbtlist li a{color:#666;text-decoration:none}
.mbtlist i{color:#999;padding-right:5px}
.mbtlist .iline{line-height:2em;margin-top:3px}
.mbtlist .icontent{line-height:1.5em;margin-top:5px}
.mbtlist div span{margin:0 5px 0 0;display:inline-block;font-weight:normal}
.mbtlist .mbttitle{font-family:oswald;font-size:13px;color:#666;font-weight:normal;text-decoration:none}
.mbtlist .mbttitle:hover,.mbtlist .itotal a:hover{color:#333;text-decoration:none}
.mbtlist .iedit a{text-decoration:none;color:#999;cursor:pointer}
.mbtlist .iedit:before,.mbtlist .iauthor:before,.mbtlist .itag:before,.mbtlist .icomments:before,.mbtlist .idate:before,.mbtlist .itotal span:before{font-family:fontAwesome;position:relative;padding-right:8px;color:#999}
.mbtlist .iauthorpic{width:17px;height:17px;border-radius:50%;float:none;display:inline-block;margin:0 0 0 0;padding-right:3px;position:relative;top:3px}
.mbtlist .itag{color:#fff;position:absolute;left:7px;top:8px;display:inline-block;font-size:11px;width:130px;height:22px;overflow:hidden}
.mbtlist .itag a{background:#000;background:rgba(0,0,0,0.7);text-decoration:none;color:#fff;padding:4px 5px;text-transform:capitalize;line-height:2em;font-family:arial;font-size:11px;border:1px solid #333}
.mbtlist .itag a:hover{background:#222;color:#eee;text-decoration:none}
.iFeatured{overflow:hidden;position:relative;float:left;margin:0 5px 10px 0;padding:0}
.iFeatured a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfFMfQ1iy4PZEapS5cZhE5Zt2LfOKqOWVlRQYjQH_rcIdajSuj1gHnR9y_EUDmwbip1g51RU4Ey7_-rpw29mYkjM6vU7H0ITk0ABcPFsAKz9N3pLUPQT95ow0922ru5pVKhd8RWlAJ4js/s100/mbt-bg1.png) 0 0;padding:7px 7px 8px 7px;display:block}
.iFeatured img{width:135px;height:80px;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;border-radius:2px}
.iFeatured:hover img{opacity:1;-moz-transform:scale(1.4);-webkit-transform:scale(1.4);transform:scale(1.4)}
.mbtlist .icomments a{color:#0080ff;font-family:arial;font-size:12px}
.mbtlist .icomments a:hover{text-decoration:underline}
.mbtlist .icomments:before{content:'\f086';padding:0 3px 0 7px;color:#84DB06}
.mbtlist .idate:before{content:'\f073';padding-right:3px}
.mbtlist .iedit:before{content:'\f040'}
.mbtlist .imore{font-size:16px;font-weight:bold;text-decoration:none;color:#666}
.mbtlist .itotal{color:#333;padding:5px 0}
.mbtlist .itotal a{font-family:oswald,arial;font-size:12px;font-weight:normal;color:#0080ff;text-decoration:none}
.mbtlist .itotal span:before{content:'\f07c'}
.mbtlist .itotal span font{padding:0 3px;color:#333;font-family:georgia;font-size:15px;font-weight:bold}
</style>
- var ListBlogLink = "http://tutorialcid.blogspot.co.id"; Gantikan Dengan Alamat BLog Anda
- var ListCount = 4; Jumblah artikel yang akan di tanpilkan
5. Munkin hanya ini saja yang saya bisa sampaikan ke pada kalin tentang Cara Membuat Recent Post Dengan Thumbnail Keren Dan Terbaru,semoga dengan kode Cara Membuat Recent Post Dengan Thumbnail Keren Dan Terbaru ini blog anda menjadi lebih keren dari pada sbelumnya ,jika anda ada haal yang menganjal pada tutorial ini silahkan untuk comen saja di bawah munkin saya bisa membantu kalain, cukup sekian terimakasih anda telah mebaca artikel Cara Membuat Recent Post Dengan Thumbnail Keren Dan Terbaru semoga bisa bermanpaat bagi anda wasalam.